程序员的资源宝库

网站首页 > gitee 正文

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

sanyeah 2024-03-29 15:20:37 gitee 5 ℃ 0 评论

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

效果图

 

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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表