一.前端上传文件

1.vue前端上传图片的文件

   //html代码
    <div class="addImages">
          <input
                   type="file"
                   class="file"
                   id="fileInput"
                   @change="getFileHead($event)"
                   accept="image/png, image/jpeg, image/gif, image/jpg"
            />
            <div class="text-detail" v-if="'' === this.imgHead">
                  <span>+</span>
                  <p>点击上传</p>
            </div>
              <div class="imgs" v-if="'' !== this.imgHead">
                      //绑定图片
                     <img :src="imgHead" width="160px" height="125px" />
             </div>
    </div>

    //选择上传的图片在methods中
    <script>
          getFileHead(event) {
            this.file = event.target.files[0];
            //创建 formData 对象
            let formData = new FormData();
            // 向 formData 对象中添加文件
            formData.append("file", this.file);
           //封装axios方法
            this.post("upload", formData, (response) => {
                 //赋值图片
                this.imgHead = response.url;
            });
        },
   </script>

//css样式
<style>
.addImages{
    display: inline-block;
    width: 160px;
    height: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px dashed darkgray;
    background: #f8f8f8;
    position: relative;
    overflow: hidden;
}
.text-detail{
    margin-top: 40px;
    text-align: center;
}
.text-detail>span{
    font-size: 40px;
}
.file{
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 125px;
    opacity: 0;
}
</style>

3.input上传图片的 样式

上传样式.png

二.node.js 服务端

1.需要使用到的插件 multer 详细信息

npm install multer --save

2.multer文件上传

//Multer在解析完请求体后，会向Request对象中添加一个body对象和一个file或files对象（上传多个文件时使用files对象 ）。其中，body对象中包含所提交表单中的文本字段（如果有），而file(或files)对象中包含通过表单上传的文件。
  
  1. 返回的req.files
   [{ 
    fieldname: 'file',    
    originalname: 'logob.png',
    encoding: '7bit',
    mimetype: 'image/png',
    destination: './public/images',
    filename: '1594979014801-logob.png',
    path: 'public\\images\\1594979014801-logob.png',
    size: 51449
   }]
  
 2. multer解析完上传文件后，会被保存为一个包含以下字段的对象：
       fieldname - 表单提交的文件名(input控件的name属性)
       originalname - 文件在用户设备中的原始名称
       encoding - 文件的编码类型
       mimetype - 文件的Mime类型
       size - 文件的大小
       destination - 文件的保存目录(DiskStorage)
       filename - 文件在destination中的名称(DiskStorage)
       path - 上传文件的全路径(DiskStorage)

       buffer - 文件对象的Buffer(MemoryStorage)

//引入插件
var express = require('express')
var router = express.Router()
const multer = require('multer');
  
//图片上传
var stroage = multer.diskStorage({
    //设置上传的文件夹
    destination: function (req, file, cd) {
        cd(null, './public/images')  // 注意是根目录 ，根目录，根目录
    },
    filename: function (req, file, cb) {
        //设置图片的名称
        cb(null, `${Date.now()}-${file.originalname}`)
    }
})
var upload = multer({ storage: stroage });
//upload.any()
router.post('/api/upload', upload.any(), function (req, res, next) {

    /*注意  app.js中设置(*设置token后，放在expressJwt 前面  ，在它可能图片不显示*)
       ***  app.use(express.static(path.join(__dirname, 'public')));
       ***  设置托管静态目录; 项目根目录+ public.  可直接访问public文件下的文件eg:http://localhost:3000/images/url.jpg
    */ 
    //拼接ulr 地址，本地监听的端口和图片的目录；
    let url = `${req.headers.host}/images/${req.files[0].filename}`
    if (!req.files) {
        return res.json({
            code: 1,
            message: '上传失败'
        })
    } else {

        return res.json({
            code: 200,
            message: '上传成功',
            url: url
        })

    }
})

完整node.js代码
Github_node
完整vue代码 （位置:src>views>modelTest>upload）
Github_vue