---again using vue, Axios, formdata do upload files, encountered a problem, although the background received the request, but the file type is recognized as a string , so the web side has been reported 500, the result is their own carelessness.
1. Because new Formdata is used to manipulate the form, and when a mock request is being tested, it is indeed the form submission "Content-type:multipart/form-data" that is seen from the header. So there is no individual in the setup.
The result was then added to this configuration before it could be passed. The principle here is to refer to the original post of the Great God.
This must be set: Content-type:multipart/form-data
2. Examples of using Vue, Axios, Formdata:
```<template> <div id= "Sample" > <!--accept defines the type of file received, which only accepts pictures--<input id= "Fileinput" @ Change= "Uploading ($event)" type= "file" accept= "image/*" > <button @click = "Submit ($event)" ></BUTTON&G T </div></template><script>Exportdefault{name:' Sample ', data () {return{file:‘‘, SRC:‘‘ }; }, methods:{uploading (event) { This. File = Event.target.files[0];//Get File varWindowurl = window. URL | |Window.webkiturl; This. File = Event.target.files[0]; //Create a URL for a picture file This. src = Windowurl.createobjecturl (event.target.files[0]); }, Submit () {Event.preventdefault ();//Cancel default behaviorLet formdata=NewFormData (); Formdata.append (' File ', This. file);//must be set to Multipart/form-data hereLet config={headers: {' Content-type ': ' Multipart/form-data '//previously said in the format of table only son data to pass Fromdata } }; This. $http. Post ('/upload ', FormData, config). Then (res) = { //do the processing }).Catch(Error) ={ }); } }};</script><style lang= "CSS" scoped></style>```
Forwarding Source:
Johe_jianshu
Links: https://www.jianshu.com/p/84e94cc446c0
Source: Pinterest
Vue Axios and FormData submit file Upload file