current position:Home>Elementui upload file

Elementui upload file

2022-05-15 05:02:54A misty rain in one's life

In the use of elementUI When submitting documents , Sometimes you need to submit some other parameters , At this time, you need to receive the uploaded file , Convert the document to formData The form data ( See the backend for details ) Submit again .
First, we need to configure... In the template el-upload, take auto-upload Set to false Disable auto submit , Related properties can be viewed elementUI file :

<el-upload
   name="file"
   ref="upload"
   :show-file-list="false"
   :action="baseUrl + '/pc/fee/bill/take-excel'"
   :before-upload="beforeUpload"
   :on-change="addFile"
   :file-list="fileList"
   :auto-upload="false">
  <el-button
  type="primary" 
  size="small"> Select File </el-button>
</el-upload>

Then when the user selects the file to upload , We need to turn into FormData The format of can be used first

let formdata = new FormData() 

created , Then through the provided

 formdata.append('name', value) 

Method direction formdata Add key value pairs . It should be noted that , At this time, if you want to check whether the addition is successful, do not use console.log() Direct printing , In this way, you will find that the output is empty , The right way is through a given get/getAll keys And so on :

console.log(formdata)    // An empty... Will be output  FormData
console.log(formdata.get('name'))  // The corresponding... Will be output value

So you can output your formdata Data .
After the preparatory work , Communicate with back-end partners , Let's configure the requested interface :

billChargePostApiQuery(url,data){   
    return request({
      url: url,
      headers: {
        "Content-Type": "multipart/form-data"        // Attention format 
      },
      method: 'post',
      data,
      baseURL: process.env.NODE_ENV === 'production' ? ' formal ' : ' test '
    })
  },

Then add some parameters required by the interface into formdata in :

let data ={
  schoolId: this.$store.state.user.school_id,
  schoolName: this.$store.state.user.school_name,
  classificationId: this.form.order_sort,
  classificationName: sort_name,
  type: this.checkList.join(','),
  feeType: this.form.month? '2': '1',
  schoolYear: schoolYearGet,
  semester: this.form.semester,
  payMonth: this.form.month,
  createUserId: this.$store.state.user.userinfo.memberId,
  createUserName: this.$store.state.user.userinfo.name
}
// On request  json  Add string 
this.fileData.append("takeExcelQuery", JSON.stringify(data))

this.$API.billChargePostApi('pc/fee/bill/take-excel',this.fileData)
.then(res => {
  console.log(' Submit successfully ',res);
}).catch(err => {
  console.log(' Submit failed ', err);
})

The rest is the work of the back-end partners .
Welcome to correct !

copyright notice
author[A misty rain in one's life],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205111232257505.html

Random recommended