Example of uploading images through vue axios form submission

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"/>

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

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!