How to use axios to submit form and upload Picture in vue

This article mainly introduces "how to use axios to realize form submission and upload pictures in vue". In daily operation, I believe many people have doubts about how to use axios to realize form submission and upload pictures in vue. Xiaobian consulted all kinds of materials and sorted out simple and easy operation methods. I hope to answer your doubts about "how to use axios to realize form submission and upload pictures in vue". Next, please follow the small series to learn together!

The element used in the project is framed, and then there is an added data requirement in the project. The picture can be uploaded or not uploaded.

Then the problem is that the upload control in element will not trigger submission when there is no picture, but the interface is written with multipart/form-data receiving mode of file

All you can do is copy another form and upload it.

let file = e.target.files[0]; let param = new FormData(); //Create form object param.append ('file ',file,file.name);//add data to the form object via append param.append ('chunk ',' 0');//Add additional data from the form let config = { headers:{'Content-Type':'multipart/form-data'} }; //add request header this.axios.post('http://upload.qiniu.com/',param,config) .then(response=>{ console.log(response.data); }) At this point, the study of "how to use axios to realize form submission and upload pictures in vue" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!