Warning ！！！！！ – There is a huge pit in Axios when uploading files.

When calling AXIos to submit data, the parameters must not be instantiated (i.e., qs instantiated), otherwise you will be confused.

Words don’t say much, go up directly dry goods ！！！！！！

1. Take a look at the code for El-Upload (there are many parameters, see elementUi for details)

 <el-upload    
  class="upload-excel"   
  ref="upload"    
  action="string"   
  accept=".xlsx, .xls"  
  :limit="1"   
  :http-request="httpRequest"   
  :file-list="fileList"     >    
  <el-button icon="el-icon-upload" 
 size="small" type="primary"</el-button> </el-upload>Copy the code



(1) Because I manually upload, so the action is set to string(any string is ok), but this action must be mandatory, don’t ask why ！！！！！

(2) Accept specifies the file format.

(3) There is a limit to the number of people

(4) The http-request parameter defines a method, this is important, it defines a manual upload method, overwrites the automatic upload, so this is the beginning of the operation.

(5) Next to the file-list is the list of files you have uploaded. If you like it, you can use it. If you don’t like it, you can leave it


2. Remember to use formData to submit parameters

FormData = new window.formData () formdata.append ()"grfFile", this.binary);

formData.append("fileId"."grfFile"); If you want to print the values in formData, you can't console. Log (formData) and you'll be confused.'fileId'(That's how it worksCopy the code


3. Axios is a giant pit (please use pure version of Axios, never use re-wrapped Axios, otherwise you will be miserable ！！！！！)

Attention hello!! this.$axiosI'm the one who introduced axios globally in the main.js file for global mounting. Remember to introduce Axios (pure version of Axios, never use rewrapped axios, you'll be miserable) this.$axios({url:this.url,// back end interface method:"post", data: this. FormData,// parameter processData:false// Tell Axios not to process the sent data (important arguments) contentType:false// tell AXIos not to set the content-type header}). Then (res =>if (res && res.data.code == "200") { this.fileList = []; this.formData = new window.FormData(); // Clear the previous file to avoid affecting the next run of this.$message({            
type: "success",            
message: "Import successful"          
});        
} else{ this.fileList = []; this.formData = new window.FormData(); // Clear the previous file to avoid affecting the next run of this.$message({            
type: "error",           
 message: "Import failed,"+ res.data.msg }); }});Copy the code


4. Let’s have an effect picture to refresh ourselves (the color is a little white, please pay attention to it)




5. Now come to the last complete code, has been packaged into a universal component, like friends can take to use

(This is a popover component to come, I do not pursue style, so a little rough, do not ridicule lol)

  <template>   
 <el-dialog       
 :title=title      
  modal-append-to-body        
:visible.sync="visible"       
 width="40%"       
 style="left:10%"       
 :before-close="cancel"    >       
 <div>           
 <div style="color:red; margin-bottom:30px; float:right;" >                
<a @click="handleDownload" slot="reference"</a> </div> <div style="margin-bottom:20px;">            
<el-upload               
 class="upload-excel"                
ref="upload"                
action="string"               
 accept=".xlsx, .xls"                
:limit="1"               
 :http-request="httpRequest"                
:file-list="fileList"            
>                
<el-button 
icon="el-icon-upload"  
size="small" type="primary"</el-button> </el-upload> </div> </div> <div slot="footer" class="dialog-footer">            
<el-button size="small" @click="cancel()"</el-button> <el-button size="small" type="primary" @click="confirm()"</el-button> </div> </el-dialog> </template> <script> import {exportInternetCelebrityRecording } from "@/api/productManagement";
import downloadFile from "@/utils/downloadFile";
exportDefault {props: {// Control popovers to hide visible: {type: Boolean,      
default: false}, // templateUrl:{type:String}, // interface address url:{type:String}, // popover title:{type:String    
}  
},  
data() {    
return{tableHeight: window.innerheight * 0.6, formData: new window.formdata (), binary: {}, // Import fileId:"", fileList: [], }; }, methods: {httpRequest(params) {this.binary = params.file; this.formData.append("grfFile", this.binary);      
this.formData.append("fileId"."grfFile"); }, // Download the templatehandleDownload() {      
let path = ""; downloadFile(this.templateUrl, path); } / / cancelcancel() {      
this.$emit("update:visible".false); }, / / sureconfirm() {// Specify the parameters to submit to the backend.$axios({       
 url:this.url,       
 method: "post",       
 data: this.formData,       
 processData: false// Tell Axios not to process the sent data (important arguments) contentType:false// Tell AXIos not to set the content-type header}). Then (res => {if (res && res.data.code == "200") {          
this.$emit("update:visible".false);                   
this.fileList = [];          
this.formData = new window.FormData();          
this.$message({            
type: "success",           
 message: "Import successful"          
});        
} else {         
 this.fileList = [];          
this.formData = new window.FormData();          
this.$message({            
type: "error",           
 message: "Import failed,"+ res.data.msg }); }}); }}}; </script> <style lang="scss"scoped> /deep/ .el-dialog__body { padding: 0 20px; max-height: 600px; overflow-y: hidden; } .input_data { margin-bottom: 20px; } h3 {float: left; } </style>Copy the code


Have a problem welcome message, I will timely help everyone to solve, if you can give a concern and collection oh ！！！！！！