在ElementUI中，对于图片上传，前端只需要传入后端提供的文件上传接口地址就行，而在vant中，需要自己手动处理。

目录

单文件：

前端：

后端：

多文件：

前端：

后端：

---

单文件：

前端：

<template>
  <div>
    <van-uploader v-model="fileList" :after-read="afterRead" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList: ""
    };
  },
  methods: {
    async afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      // 需要使用 FormData 进行文件上传
      let form = new FormData();
      form.append("file", file.file);
      axios({
        method: "post",
        url: "http://127.0.0.1:7878/upload",
        data: form,
        // headers: {
        //     'Content-Type': 'multipart/form-data'
        // }
      })
        .then((res) => {
          file.status = "done";
          file.message = "上传成功";
          console.log(res);
        })
        .catch((err) => {
          file.status = "failed";
          file.message = "上传失败";
          console.log(err);
        });
    },
  },
};
</script>

下面是afterRead方法的形参

对于文件上传，需要配置请求头

'Content-Type': 'multipart/form-data'

在vue的axios中，不用配置也是可以正常使用的，在axios底层做了处理

后端：

步骤：

1. 后台安装multer模块，引入fs模块

2. post请求需要引入urlencoded

3. 还需要创建一个upload文件夹来存放前端上传的图片

const fs = require('fs')
const multer = require('multer')
app.use(express.urlencoded({ extended: true }));
// 静态资源共享（express框架）
app.use(express.static('upload'))


var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "./upload")
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + "-" + file.originalname)
    }
})
var createFolder = function (folder) {
    try {
        fs.accessSync(folder)
    } catch (e) {
        fs.mkdirSync(folder)
    }
}
var uploadFolderUser = './upload'
createFolder(uploadFolderUser)
var upload = multer({ storage: storage })
app.post('/upload', upload.single('file'), function (req, res, next) {
    var file = req.file
    res.json({ res_code: '0', name: file.originalname, url: file.path })
})

可以使用 app.use(express.static('upload')) 来托管服务器静态资源（需要安装express），

这样就可以通过访问服务器来查看图片资源了。

多文件：

前端：

和前端单文件上传相比，就只需要进行便利file(afterRead的形参，是一个数组)文件数组，将它的每一项一次添加进formData中，再调用后端提供的多文件上传接口就行。

async afterRead(file) {
    // 多图片上传
    file.status = 'uploading'
    file.message = '上传中...'
    let formData = new FormData()
    //需要依次添加进去
    for (let i = 0; i < file.length; i++) {
        formData.append('photos', file[i].file)
    }
    let res = await reqSpaceUploadPhotos(formData)
    console.log(res);
    if (res.res_code === 200) {
        file.status = 'done'
        file.message = '上传成功'
    } else {
        file.status = 'failed'
        file.message = '上传失败'
    }

}

// 多文件上传接口（前端）
export const reqSpaceUploadPhotos = (form) => request({url: '/space/upload/photos', method: 'post', data: form})

后端：

和前面的单文件上传相比，在接口配置的地方发送了变化

// photos是跟前端的字段要一致
/**
 *  let form = new FormData()
    form.append('photos', file.file)
 */
router.post('/space/upload/photos', uploadSpace.array('photos', 9), function (req, res, next) {
    // multer实例.array(fielname[,maxCount])——接收一个以fielname命名的文件数组;maxCount——限制上传的最大数量，这些文件的信息保存在req.files里面
    let files = req.files
    let filesRes = []
    files.forEach(i => {
        filesRes.push(`/${i.filename}`)
    })
    if (files.length === 0) {
        return res.json({ res_code: 500, url: filesRes })
    } else {
        res.json({ res_code: 200, url: filesRes })
    }
})

 当图片上传成功后，前端获得到的信息