使用vue vant上传图片时，有哪些细节需特别注意？

本文共计596个文字，预计阅读时间需要3分钟。

使用 `van-uploader` 组件，并通过 `v-model=fileList` 实现文件列表绑定，设置 `multiple` 属性允许多选，`after-read` 方法处理文件读取后的逻辑，`max-count=1` 限制最多选择1个文件。上传文件流，并确保提交时使用 `form-data` 模式。

上传文件处理函数 `afterRead(file)`：

javascriptafterRead(file) { console.log('选择的文件:', file); // 这里处理文件，例如选择一张图片}

<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); },

3：vue 里面axios 拦截处理 因为上传模式必须是from-data 所以就要设置 config.headers['Content-Type'] = 'multipart/form-data';

//httprequest拦截器 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); //} //} } returnconfig; },(error)=>{ returnPromise.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 上传图片的资料请关注易盾网络其它相关文章！