vue+vant 上传图片需要注意的地方


Posted in Vue.js onJanuary 03, 2021
<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />

1:上传文件流,提交的模式 肯定得 form-data模式

vue+vant 上传图片需要注意的地方

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

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 上传图片需要注意的地方的详细内容,更多关于vue+vant 上传图片的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
vue中使用echarts的示例
Jan 03 #Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 #Vue.js
vue中activated的用法
Jan 03 #Vue.js
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
You might like
重置版宣传动画
2020/04/09 魔兽争霸
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
PyTorch-GPU加速实例
2020/06/23 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
优秀学生干部个人的自我评价
2013/10/04 职场文书
草船借箭教学反思
2014/02/03 职场文书
同学聚会主持词
2014/03/18 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
《落花生》教学反思
2016/02/16 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python