An issue with uploading a picture using Axios+formdata+vue to experience the value of a picture not being accepted in the background

Paste the code directly first

The HTML code is as follows:

<type= "file"@change= "getfileexpr ($event)"> <  ID= "Uploadform"  : Rules= "Rules2"  method= "POST"  enctype= "Multipart/form-data">

This place I was using the element UI framework in the form component of the native HTML form tag can also be, primarily add ID and specify

Method= "POST" enctype= "Multipart/form-data"

OnChange method to get the file name and file
Getfileexpr (event) {
  This.filename = Event.target.files[0].name;
  This.file = Event.target.files[0];
},

For formdata use, please search by yourself
Let Uploadform=document.getelementbyid ("Uploadform"New
Formdata.append (' img ', this.file);

this. $http. Post (' url '= =
})

Usually this is the place where this is. $http is the Axios global configuration and then import the prototype problem to Vue because the POST request is in the Formdata format when the global configuration is introduced, the QS module is used to format the data But if you are using the upload, do not use QS to format this data, otherwise the background is not receiving data, so this judgment should be added a condition

Config.data.constructor!== FormData Not equal to FormData in the case of QS data

if (Config.method  = = = ' Post ' && config.data.constructor!== FormData      ) {= qs.stringify ( config.data);  }

The above is the reason, when the first knowledge axios need to configure a lot of things unlike the previous JQ-based Ajax, such as the need to default Axios request is the JSON format needs to formdata format needs to introduce the QS module, such as uploading pictures again to judge this, encountered this problem , first look at the back-end report what error, if the back end is not a problem, then go to find documents, to search, the error scale gradually narrowed, such as the problem, the first is the back end to receive the image I upload, only receive text information, first from Fromdata this check, because it is also the first time with Formdata, Then there is no problem against the online case, then use the JQ Ajax request, but can be requested to indicate that the problem is still on the Aixos, for the novice to the wrong size gradually narrowed I think it's a good idea.

An issue with uploading a picture using Axios+formdata+vue to experience the value of a picture not being accepted in the background