Detailed explanation of the steps to send a post request and submit an image form in axios

This time I will bring you axios to send post request Submit pictureDetailed explanation of the form steps, what are the notes for axios to send post request to submit the picture form, The following is a practical case, let’s take a look.

DOME

<input type="file" @change="upload" ref="upload">

Interface

const userUploadAtt = (File,config) => axios.post("接口",File,config)

Processing data

let input = this.$refs.upload 
创建一个空的FormData对象 
let data = new FormData();
使用FormData.append来添加键/值对到表单里面;
data.append('file', input.files[0]);
upload(){
 userUploadAtt(data,{headers: {'Content-Type': 'multipart/form-data'}}).then((response)=>{
  this.headPhoto = response.data[0].msg.url;
 }).catch(()=>{
 })
}

Note:

If

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
post请求时候表单上传不需要引入qs.stringify()

believes it after reading this case You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps of using axios in vue

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

The above is the detailed content of Detailed explanation of the steps to send a post request and submit an image form in axios. For more information, please follow other related articles on the PHP Chinese website!