ELEMENT-UI realizes multi file plus form parameter upload

Element UI is to upload multiple images, one image at a time.

If you want to upload more than one picture at a time, you have to turn off auto upload: Auto upload = 'false'. At the same time, instead of using the element built-in upload function, change to the onsubmit()

In order to add and delete pictures, you can obtain the filelist in the on change and on remove events (the essence of filelist is the alias of uploadFiles, and uploadFiles is the built-in array of element used to save the files or pictures to be uploaded). In the last step of submission, you can add the values in filelist to the formdata object one by one (formdata.append(), formdata. Delete Te () delete), and upload uniformly.

ps: on preview event and < El dialog > component as well as corresponding attributes and methods are used to realize the click to enlarge function of pictures. The annotated beforeupload has only one argument, which is used when uploading a single file. It cannot be used here

    

 

 

<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">Click to view filelist</el-button>
    <el-button type="" @click="onSubmit">Submission</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(`Confirm removal ${ file.name }?`);
      },
      OnChange(file,fileList){
        this.fileList=fileList

      },
      OnRemove(file,fileList){
        this.fileList=fileList
      },
      //Prevent the upload of upload by itself and carry out re operation
      // beforeupload(file) {
      //     console.log('-------------------------')
      //     console.log(file);
      //     //Create a temporary path to show the image
      //     //Rewrite a form upload method
      //     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>

 

Posted on Sun, 09 Feb 2020 13:31:39 -0500 by simun