ELEMENT-UI实现多文件加表单参数上传

element-ui是分图片多次上传，一次上传一个图片。

如果想一次上传多个图片，就得关掉自动上传：auto-upload=‘false’，同时不使用element内置上传函数，换成自己写的onsubmit()

为了实现图片的添加删除，可在on-change与on-remove事件中取得filelist（filelist实质就是uploadFiles的别名，而uploadFiles就是element内置的用于保存待上传文件或图片的数组），在最后一步提交的过程中，将filelist中的值一一添加到formdata对象中（formdata.append()添加，formdata.delete()删除），然后统一上传。

ps：on-preview事件和<el-dialog>组件以及对应属性、方法这一体系是用来实现图片的点击放大功能。                                          被注释掉的beforeupload只有一个实参，是针对单一文件上传时使用到的，这里无法用上

    

 

 

<template>
  <div>
    <el-upload
      action="http://127.0.0.1:8000/api/UploadFile/"
      list-type="picture-card"
      :auto-upload="false"
      :on-change="OnChange"
      :on-remove="OnRemove"
      :on-preview="handlePictureCardPreview"
      :before-remove="beforeRemove"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="" @click="fun">点击查看filelist</el-button>
    <el-button type="" @click="onSubmit">提交</el-button>
  </div>
</template>

<script>
import {host,batchTagInfo} from '../../api/api'
export default {
    data() {
      return {
        param: new FormData(),
        form:{},
        count:0,
        fileList:[],
        dialogVisible:false,
        dialogImageUrl:''
      };
    },
    methods: {
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      OnChange(file,fileList){
        this.fileList=fileList

      },
      OnRemove(file,fileList){
        this.fileList=fileList
      },
      //阻止upload的自己上传，进行再操作
      // beforeupload(file) {
      //     console.log('-------------------------')
      //     console.log(file);
      //     //创建临时的路径来展示图片
      //     //重新写一个表单上传的方法
      //     this.param = new FormData();
      //     this.param.append('file[]', file, file.name);
      //     this.form={
      //       a:1,
      //       b:2,
      //       c:3
      //     }
      //     // this.param.append('file[]', file, file.name);
      //     this.param.append('form',form)
      //     return true;
      // },
      fun(){
        console.log('------------------------')
        console.log(this.fileList)
      },
      onSubmit(){
         this.form={
            a:1,
            b:2,
            c:3
          }
          let file=''
        for(let x in this.form){

          this.param.append(x,this.form[x])
        }
        for(let i=0;i<this.fileList.length;i++){
          file='file'+this.count
          this.count++
          this.param.append(file,this.fileList[i].raw)
        }
        batchTagInfo(this.param) 
          .then(res=>{
            alert(res)
          })
      }
    }
  }
</script>

<style>

</style>