Home > front end >  For help about axios upload file error
For help about axios upload file error

Time:09-22

Server error:
Resolved [org. Springframework. Web. Multipart. Support. MissingServletRequestPartException: Required request parts' excelFile 'is not the present]
A browser error:
StudentAddByExcel: 146 Error: the Request failed with the status code 400
The at e.e xports (spread. Js: 25)
The at e.e xports (spread. Js: 25)
At the XMLHttpRequest. L. & lt; Computed> (spread. Js: 25),
The front-end code:
 
Var test1=new Vue ({
El: "# div_UpExcel",
Data: {
File: ", "
Filename: ", "
FileUpFlag: false,
MSG: ", "
Msg2: ", "
Total: ", "
SuccessSum: ", "
ErrorSum: ", "
ErrorIf: ", "
//ceshi: ""

},
Methods: {
GetFileName: function (e) {
//alert (e. arget. Files [0]. Name)
Enclosing the file=e. arget. Files [0];
Var fileType="";
var result="";
Try {
Var fileNameSplit=e. arget. Files [0]. Name. The split (". ");
FileType=fileNameSplit [fileNameSplit. Length - 1]
} the catch (e) {
FileType=""
}
Var excelList=[' like ', 'XLSX];
Result=excelList. Some (function (item) {
Return the item==fileType.
});
If (result) {
This. MSG="file type is correct, you can upload";
Enclosing fileUpFlag=true;

} else {
Enclosing msg2="file type error, only supports. XLS, XLSX suffix file".
Enclosing fileUpFlag=false;
}
},
Btn2: function () {
Let the config={
ResponseType: "blob"
};
Let the formData=https://bbs.csdn.net/topics/new formData ();
//the console. The log (enclosing errorIf);
//the console. The log (JSON. Stringify (enclosing errorIf));
FormData. Append (" errorIf ", JSON. Stringify (enclosing errorIf));
Axios. Post ("/download "formData, config)
Then (res=& gt; {
Const link=document. The createElement method (" a ");
Let the blob=new blob ([res. Data], {type: 'multipart/form - data'});
The link. Style. The display="none";
The link href=https://bbs.csdn.net/topics/URL.createObjectURL (blob);
The link. The setAttribute (" download ", decodeURI (res) headers [' filename ']));
Document. The body. The appendChild (link);
Link. Click ();
Document. Body. RemoveChild (link);
})
The catch (error=& gt; {
Alert (" server exception! I'm very sorry ");
console.log(error);
});

},
Btn1: function (e) {
if (! Enclosing fileUpFlag) {
Alert (" please correct select upload file!" );
} else {
Enclosing msg2="file being parsed, please wait a moment";
Let the formData=https://bbs.csdn.net/topics/new formData ();
FormData. Append (' excelFile, enclosing the file).
The console. The log (formData. Get (" excelFile "));
Let the config={
The content-type headers: {" ":" multipart/form - the data "}
};
Axios. Post ("/excelUp "formData, config). Then, the response=& gt; {
This. The total=response. The data. The total;
This. ErrorIf=response. Data. ErrorIf;
This. SuccessSum=response. Data. SuccessSum;
This. ErrorSum=response. Data. ErrorSum;
Enclosing msg2="file parsing is complete! Total upload data: "+ this. Total +" number of successful execution: "+ enclosing successSum +" number of failure: "+ enclosing errorSum
{}). The catch (function (error)
The console. The log (error)
});
}
E.p reventDefault ()

}
}
})

 






The back-end code:
 
@ ResponseBody
@ PostMapping ("/excelUp ")
Public ExcelAnalyzeResult excelUp (@ RequestParam (" excelFile ") MultipartFile MultipartFile) {
Try {

Return rootService. AddUserExcel (multipartFile getInputStream ());
} the catch (Exception e) {
e.printStackTrace();
}
return null;
}

Details problem description: the code in the local localhost runtime, upload files in Google and firefox are no problem, but when deployed to huawei cloud, with firefox visits were no problem, when using Google browser access, only when the server project start after the first visit, absolutely right to upload, then click upload times wrong, but the most confusing point here, if you click upload a dozen times, even the occasional can upload success once or twice, brother help to consult, hope everybody technology is chrome browser does not support anything? First thanked the


  • Related