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 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 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
php下载远程文件类(支持断点续传)
2008/11/14 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php开启openssl的方法
2014/05/15 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
js同时按下两个方向键
2007/12/01 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
js同源策略详解
2015/05/21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
新手简单了解vue
2019/05/29 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue实现分页加载效果
2019/12/24 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
python中setuptools的作用是什么
2020/06/19 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
优秀学生获奖感言
2014/02/15 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
趵突泉导游词
2015/02/03 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python