axios上传图片-使用vant组件

第一种:用vant 中的uploader组件

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

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

axios上传图片-使用vant组件_第1张图片

调取接口

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实现


 

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=>{


})



}

你可能感兴趣的:(axios上传图片-使用vant组件)