vant uploader组件点击图片上传,vue引入vant
这篇文章主要介绍了vue vant上传图片需要注意的地方，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
van-uploader v-model= file list multiple:after-read= afterRead :max-count= 1 /
1:上传文件流，提交的模式 肯定得 form-data模式
2：上传的文件file 做出处理我这里做的只能选择一张
读后(文件){
console.log(文件);//控制台可以看见图片信息
if(this.fileList.length 1){
这个。文件列表。拼接(1)；
这个. msg({
文本：只能选择这么多！
类型："信息"
})
返回错误的
}
让文件=这个。文件；
文件。推送(文件。文件)；
},
3：vue 里面axios 拦截处理 因为上传模式必须是from-data 所以就要设置 config.headers[Content-Type] = multipart/form-data;
//httprequest拦截器
axios。截击机。请求。使用((配置)={
if(config.method===post){
if(config.data！config.data.i){
配置。headers[ Content-Type ]= multipart/form-data ；
}否则{
配置。数据=QS。stringify(配置数据)；
}
//if(config.data){
//if(config。数据。I===未定义){
//config。headers[ Content-Type ]= multipart/form-data ；
//}其他{
//config。数据=QS。stringify(配置数据)；
//}
//}
}
返回配置
},(错误)={
return无极.拒绝(错误);
})
4：就是上次图片前端做的处理需要用到 new FormData()做出处理，因为是文件流，直接打印是看不出来的详情去看官网new FormData()。
WineOrder(){
console.log(这个。文件)
this.disabled=true
const data=new FormData()；
const USER=JSON。解析(会话存储。getitem( USER ))；
data.append(i ，用户。uni acid)；
data.append(token ，用户。token)；
data.append(bid ，用户。出价)；
data.append(roomid ，this。roomid)；
data.append(booker ，this。丁名)；
data.append(guestname ，this。用户名)；
data.append(type ，this。类型)；
data.append(tel ，this。电话)；
data.append(endtime ，this。日期)；
data.append(file ，this .文件[0]);
数据。append(好信息，JSON。stringify(这个。保存winelist))；
葡萄酒订单(数据)。然后((e)={
if( e.code==0 ){
this.disabled=false
e。总金额=" "；
var c={
主题：,
数据：e，
键入：“保存葡萄酒”
}
返回；
setTimeout(()={
窗户。位置。href= setter顺序？c= rel=外部无跟随 JSON。stringify(c)；
}, 1500);
}否则{
this.disabled=false
这个. msg({
正文：e.msg，
类型："信息"
})
}
})
},
效果图
剩下的就交给后端处理就行了，到这里就完全可以了
以上就是vue vant上传图片需要注意的地方的详细内容，更多关于vue vant上传图片的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。