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 数据操作相关总结
Dec 17 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue Element plus使用方法梳理
Dec 24 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制作静态网站的模板框架(四)
2006/10/09 PHP
组合算法的PHP解答方法
2012/02/04 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
迎元旦广播稿
2014/02/22 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers