vue中实现formData批量上传多个文件

utils/formData.js

import Vue from 'vue'
import axios from 'axios'

/**
 * 多个二进制流附件以数组格式上传
 * @param {*} url 请求接口路径
 * @param {*} params 请求参数
 * @returns 接口响应
 */
var uploadFileList = function (url, params) {
  let config = {
    // 添加请求头
    headers: {
      'Content-Type': 'multipart/form-data',
      'token': Vue.cookie.get('token') // 请求头带上token
    }
  }
  // 一般参数可以正常序列化并传递，传文件的文件流是无法被序列化并传递的；
  // 使用formData对象序列化要传递的参数，就可以进行文件上传了。
  let param = new FormData()
  // 通过append向form对象添加数据
  Object.keys(params).forEach(key => {
    const val = params[key]
    // 附件是以二进制流数组格式传进来，拆分成一个个相同key的项，放在载荷里面给后端上传；
    // 但后端实际上收到的还是一个数组，只不过前端载荷是若干个相同key的参数。
    if (Array.prototype.isPrototypeOf(val)) {
      val && val.map(files => {
        param.append(key, files)
      })
    } else { // 其他参数正常key上传
        param.append(key, val)
    }
  })
  return axios.post(url, param, config) // post请求（可以改成get请求）
}

export { uploadFileList } // 抛出去这个方法，供其他特殊页面使用

import { uploadFileList } from "@/utils/formData.js";

// 传入url路径和params参数
uploadFileList(url, params).then(({data}) => {

if (data.code == 0) {
          Message({
            type: "success",
            message: "批量上传成功"
          });
        } else {
          Message({
            type: "error",
            message: "上传失败，请重试"
          })
        }
});