element ui 自定义上传多个文件

el-upload一次请求上传多个文件。

在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用this.$refs.upload.submit();方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传:auto-upload=“false”。

VUE代码如下：

<template>

    <div>

            <el-upload

              ref="upload"

              :limit="10"

              accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"

              name="files"

              :multiple="true"

              :action="baseURL"

              :headers="myToken"

              :on-change="handleFileChange"

              :before-remove="handleFileRemove"

              :auto-upload="false"

              :file-list="upload.fileList"

              >

              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

            </el-upload>

            <el-button type="primary" @click="submitFileForm">确 定</el-button>

    </div>

</template>

<script>

  //这里引入后端接口

    import {uploadFile} from '../../api/api'

 export default {

        name: "goods",

        data(){

            return{

                upload: {

                    fileList: [],

                    fileName: []

                },

            }

        },

        methods:{

                // 上传发生变化钩子

    handleFileChange(file, fileList) {

      this.upload.fileList = fileList;

    },

    // 删除之前钩子

    handleFileRemove(file, fileList) {

      this.upload.fileList = fileList;

    },

    // 提交上传文件

    submitFileForm() {

      // 创建新的数据对象

      let formData = new FormData();

     // 将上传的文件放到数据对象中，注意我后端是接收的file名文件数组不是下面的fileName

      this.upload.fileList.forEach(file => {

        formData.append('file[]', file.raw);

        this.upload.fileName.push(file.name);

      });

      console.log("提交前",formData.getAll('file'));

      // 文件名

      formData.append('fileName', this.upload.fileName);

      // 自定义上传（这里调用后端接口）

      uploadFile(formData).then(response => {

          console.log(response);

        })

        .catch(error => {

            console.log(error);

        });

    },

 

        }

           

    }

</script>

<style lang="less" scoped>

</style>

下面是上传的郊果 图：