element-ui + vue 批量上传文件，接口请求一次

使用element-ui的上传组件时，你使用的是自动上传（即选择完文件就立马上传），即使你设置了属性  :multiple=true,但是请求接口的时候还是分开请求的，你选了几个文件就请求几次，那我们要如何请求一次，把文件和自己所需要的参数拼接好传给后台呢？这需要把自动上传改为手动上传。

主要有两个步骤，首先是选取文件，第二部是点击上传（这一步做参数拼接）。上代码：

html部分

<el-dialog
   title="上传文件"
   :visible.sync="uploadVisiable"
   :close-on-click-modal="false"
   width="50%">
    <div style="height: 300px;overflow: auto;">
     <el-upload
        action="#"
        :show-file-list="true"
        :on-remove="removeFile"
        :multiple="true"
        :file-list="fileList"
        :on-change="handleChange"
        :auto-upload="false"
       >
       <el-button class="card-foot-btn" icon="upload2">选取文件</el-button>
     </el-upload>
    </div>
    <div slot="footer" class="dialog-footer text-center">
       <el-button @click="uploadFile" type="primary">上传</el-button>
       <el-button @click="uploadVisiable = false, fileList = []">取消</el-button>
    </div>
</el-dialog>

属性说明：

action: 必须，手动上传时随便给个字符串

show-file-list：是否显示所选的文件列表

multiple：是否支持多选

auto-upload: 是否自动上传

on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

on-remove:文件列表移除文件时的钩子

 

js部分

export default {
    data() {
        return {
            uploadVisiable: true,
            fileList: [],
        },
        methods: {
            // 选择文件时，往fileList里添加
            handleChange (fileList) {
                this.fileList.push(fileList)
            },
            // 移除文件
            removeFile (file) {
                // 移除文件时，要重新给fileList赋值
                let arr = []
                for (let i = 0; i < this.fileList.length; i++) {
                  if (this.fileList[i].uid !== file.uid) {
                    arr.push(this.fileList[i])
                  }
                }
                this.fileList = arr
            },
            // 手动文件上传
            uploadFile () {
                if (this.fileList.length === 0) {
                  this.$message.warning('请选取文件')
                  return
                }
                const formData = new FormData()
                // 因为要传一个文件数组过去，所以要循环append
                this.fileList.forEach((file) => {
                    formData.append('file', file.raw)
                })
                formData.append('id', 'id') // 自定义参数
                formData.append('org_id', 'org_id') // 自定义参数
                formData.append('org_name', '名字') // 自定义参数
                // fileUpload 是我自己定义的接口
                fileUpload(formData).then(res => {
                  if (res.success) {
                       // 上传成功的操作
                  } else {
                    this.$message.error(res.msg)
                  }
                  this.fileList = []
                }).catch(err => {
                  this.$message.error('上传失败，请重新上传')
                  console.log('报错', err)
                })
            },
        }
    }
}

因为formData()里的数据打印不出来，所以提供以下几种方法获取到formData()里的数据。（原文：https://blog.csdn.net/NAMECZ/article/details/84585709#commentBox）
1、get("key")  获取到该key的第一个值

2、getAll("key") 获取到该key的所有值

3、entries("key") 遍历FormData对象中的所有键值对

 

批量上传调用接口参数如图：

 

如有问题，欢迎交流~~~！！