vue+vant 上传图片需要注意的事项

  <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';

//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);

})

3：就是上次图片前端做的处理需要用到 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="+JSON.stringify(c);
                   }, 1500);
               }else{
                     this.disabled = false;
                     this.$msg({
                       text:e.msg,
                       type:'info'
                   })
               }
            })
        },

效果图

 

 剩下的就交给后端处理就行了，到这里就完全可以了