axios上传图片-使用vant组件

第一种：用vant 中的uploader组件

<van-uploader v-model="fileList" :after-read="afterRead" />

var params= new formData //创建form对象

params.append('data',flie.file) //通过append向form对象添加数据

调取接口

this.$http.post(this.$api.地址，params,{header:{ 'Content-Type': 'multipart/form-data' }}).then(res=>{

if(res.data.code === 0){

this.$toast('上传成功')

}else

{

this.$toast(res.msg)

}

}).catch(err=>{

this.$toast(err)

})

这个是利用vant插件，vant已经把file进行分装，因此可以file.file可以直接获取到后台需要的blob流文件

第二种：用input实现

 <input type="file" accept=".img/.png/.jpg" @change="uploadimg" v-modle=“file”>

uploadimg(e){

var f = e.target.files[0]  //blob流文件位置

let params = new formdata()

params.apppend('data',f)

 let config = {

        headers: { 'Content-Type': 'multipart/form-data' }

       } //请求头

axios.post(请求地址，params,请求头).then(res=>{

})

}