Vue Axios and FormData submit file Upload file

Source: Internet
Author: User

---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)" &GT;&LT;/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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.