vue3.X+node.js上传图片

1、vue.js使用bootstrap多文件上传组件

<input style="width:500px" @change="a" name="files"
 class="form-control form-control-sm" type="file"
 id="formFileMultiple" multiple/>

2、定义change方法，获取图片信息并上传后端

a(e){
     this.form.file=e.target.files[0]
            
     let file=this.form.file
     let formData=new FormData()
            
     formData.append("headfile",file)

     const headers = {
           "Content-Type": "multipart/form-data"
     };

            
     axios.post("/api/yutu/upload",formData,{headers}).then(res=>{
            alert(res.data.message)
     })

},

3、node.js安装中间件接收post form-data

var multipart = require('connect-multiparty')
const multipartyMiddleware = multipart()

router.post('/upload',multipartyMiddleware,YutuController.upload);

4、后端文件上传方法

var fs = require('fs');
var path = require('path');

function upload(req,res){

    try {
        if(!req.files.headfile) {
            res.send({
                status: false,
                message: 'No file uploaded'
            });
        } else {
            let avatar = req.files.headfile;

            var source = fs.createReadStream(avatar.path);
            var file = path.join( __dirname, '../uploads', avatar.originalFilename);
            var dest = fs.createWriteStream(file);
            source.pipe(dest);

            res.send({
                status: true,
                message: '图片上传成功！',
                data: {
                    name: avatar.name,
                    mimetype: avatar.mimetype,
                    size: avatar.size
                }
            });
        }
    } catch (err) {
        res.status(500).send(err);
    }
}