vue+vant 上传图片需要注意的地方
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了vue+vant 上传图片需要注意的地方,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
1:上传文件流,提交的模式 肯定得 form-data模式
2上传的文件file 做出处理我这里做的只能选择一张
afterRead(file){ console.log(file); //控制台可以看见图片信息 if(this.fileList.length > 1){ this.fileList.splice(1); this.$msg({ text:'只能选择这么多!', type:'info' }) return false; } let Files = this.Files; Files.push(file.file); },
3vue 里面axios 拦截处理 因为上传模式必须是from-data 所以就要设置 config.headers['Content-Type'] = 'multipart/form-data';
//http request 拦截器 axios.interceptors.request.use((config) => { if (config.method === 'post') { if( config.data && !config.data.i ){ config.headers['Content-Type'] = 'multipart/form-data'; }else{ config.data = Qs.stringify(config.data); } // if ( config.data ){ // if ( config.data.i === undefined ){ // config.headers['Content-Type'] = 'multipart/form-data'; // }else{ // config.data = Qs.stringify(config.data); // } // } } return config; }, (error) => { return Promise.reject(error); })
4就是上次图片前端做的处理需要用到 new FormData() 做出处理,因为是文件流,直接打印是看不出来的详情去看官网new FormData()。
WineOrder(){ console.log(this.Files) this.disabled = true; const data = new FormData(); const USER = JSON.parse(sessionStorage.getItem('USER')); data.append('i',USER.uniacid); data.append('token',USER.token); data.append('bid',USER.bid); data.append('roomid',this.roomid); data.append('booker',this.dingName); data.append('guestname',this.userName); data.append('type',this.type); data.append('tel',this.phone); data.append('endtime',this.date); data.append('file',this.Files[0]); data.append('goodsinfo',JSON.stringify(this.savewineList)); WineOrder(data).then((e)=>{ if( e.code == 0 ){ this.disabled = false; e.totalmoney = ''; var c ={ Topic:"", data:e, type:'Savewine' } return; setTimeout(() => { window.location.href="setterOrder?c=" rel="external nofollow" +JSON.stringify(c); }, 1500); }else{ this.disabled = false; this.$msg({ text:e.msg, type:'info' }) } }) },
效果图
剩下的就交给后端处理就行了,到这里就完全可以了
以上就是vue+vant 上传图片需要注意的地方的详细内容,更多关于vue+vant 上传图片的资料请关注狼蚁SEO其它相关文章!
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指