element 多文件上传，一次请求完成。

前几天再用element

上传功能时发现，element的上传如果一次选择多张图片，则会提交多次。查看API以及搜索得到解决办法

主要是首先禁用掉自动伤上传  :auto-upload="false"   然后设置自定义提交方法  :http-request="uploadFile"，这样的话我们通过  this.$refs.id.submit(); 提交时就可以触发这个 uploadFile方法，这时就将文件装载完毕，然后通过axios发送。

<el-upload  class="upload-demo" ref="upload"
 action="cunstomer"
  name="org_files"
  :multiple="true"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false"
  :http-request="uploadFile"
  >
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
</el-upload>


<script>
  export default {
    data() {
      return {
        fileList:[],
        formDate:""
      };
    },
    methods: {
      uploadFile(file){
        console.log(file.file)
        console.log("uploadFile");
        this.formDate.append('org_files', file.file);
      },
      submitUpload() {
        console.log("submitUpload");
        this.formDate = new FormData()
        this.$refs.upload.submit(); //执行此步骤 相当于执行 http-request 的自定义实现方法
        this.formDate.append('其他参数名称', "*****");
        let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }    
        axios.post("url", this.formDate,config).then( res => {
          console.log(res)  
        }).catch( res => {
          console.log(res)
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        
      }
    }
  }

</script>