Home > Web Front-end > JS Tutorial > body text

Example of uploading images through vue axios form submission

亚连
Release: 2018-05-29 17:36:32
Original
2667 people have browsed it

Below I will share with you an example of uploading images through the vue axios form. It has a good reference value and I hope it will be helpful to everyone.

The element framework is used in the project, and then there is a need to add data in the project. Pictures can be uploaded or not.

Then the problem is that the upload control in element does not have pictures. Submission will not be triggered, but the interface is written with file multipart/form-data receiving mode

So you can only imitate a form upload by yourself

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
Copy after login

let file = e.target.files[0];    
   let param = new FormData(); //创建form对象 
   param.append(&#39;file&#39;,file,file.name);//通过append向form对象添加数据 
   param.append(&#39;chunk&#39;,&#39;0&#39;);//添加form表单中其他数据 
   
   let config = { 
   headers:{&#39;Content-Type&#39;:&#39;multipart/form-data&#39;} 
   }; //添加请求头 
   this.axios.post(&#39;http://upload.qiniu.com/&#39;,param,config) 
   .then(response=>{ 
   console.log(response.data); 
   })
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript code to implement the upload preview function of txt files

Angular uses the operation event command ng-click Example of passing multiple parameters

Angular uses filter uppercase/lowercase to implement letter case conversion function example

The above is the detailed content of Example of uploading images through vue axios form submission. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!