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


})



}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容