Detailed explanation of the steps to upload images in the vue+axios form

This time I will bring you a detailed explanation of the uploadingimages steps in the vue axios form. What are the precautions for uploading images in the vue axios form? The following are Let’s take a look at practical cases.

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 file multipart/form-data receiving mode

You can only imitate a form to 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); 
   })

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to the php Chinese websiteOthersrelated articles!

Recommended reading:

Detailed explanation of the steps of using axios in vue

Detailed explanation of the steps of axios post method to submit formdata

How to deal with permission issues when installing in npm

The above is the detailed content of Detailed explanation of the steps to upload images in the vue+axios form. For more information, please follow other related articles on the PHP Chinese website!