Vue之input使用formData实现批量上传多个文件

文件上传 type设为file类型

<input
    type="file"
    ref="file"
    @change="showimg"
    id="files"
    multiple
/>

<el-button type="primary" size="small" @click="uploadFiles">开始上传</el-button>

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

data(){
    return {
        files: [],
    }
},
methods: {
    showimg() {
      const that = this;
      var fileObj = that.$refs.file.files;

      // 循环给files中添加文件
      Object.keys(fileObj).forEach((key) => {
        // console.log(fileObj[key]);
        var fr = new FileReader();
        fr.readAsDataURL(fileObj[key]);
        fr.onload = function () {
          that.files.push(fileObj[key]);
        }
      })
    },
    uploadFiles() {
       // url形参，替换成自己的请求路径
      uploadFileList(this.$http.adornUrl(url, {files: this.files}).then(({data}) => {
        if (data.code == 0) {
          Message({
            type: "success",
            message: "批量上传成功"
          });
          this.files = [];
        }
      })
    },
}

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 }

原文地址：https://blog.csdn.net/T_ianxin/article/details/131371811

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！