1. <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="" />

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

2:上传的文件file 做出处理我这里做的只能选择一张

  1. afterRead(file){
  2. console.log(file); //控制台可以看见图片信息
  3. if(this.fileList.length > ){
  4. this.fileList.splice();
  5. this.$msg({
  6. text:'只能选择这么多!',
  7. type:'info'
  8. })
  9. return false;
  10. }
  11. let Files = this.Files;
  12. Files.push(file.file);
  13. },

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()

  1. WineOrder(){
  2. console.log(this.Files)
  3. this.disabled = true;
  4. const data = new FormData();
  5. const USER = JSON.parse(sessionStorage.getItem('USER'));
  6. data.append('i',USER.uniacid);
  7. data.append('token',USER.token);
  8. data.append('bid',USER.bid);
  9. data.append('roomid',this.roomid);
  10. data.append('booker',this.dingName);
  11. data.append('guestname',this.userName);
  12. data.append('type',this.type);
  13. data.append('tel',this.phone);
  14. data.append('endtime',this.date);
  15. data.append('file',this.Files[]);
  16. data.append('goodsinfo',JSON.stringify(this.savewineList));
  17. WineOrder(data).then((e)=>{
  18. if( e.code == ){
  19. this.disabled = false;
  20. e.totalmoney = '';
  21. var c ={
  22. Topic:"",
  23. data:e,
  24. type:'Savewine'
  25. }
  26. return;
  27. setTimeout(() => {
  28. window.location.href="setterOrder?c="+JSON.stringify(c);
  29. }, );
  30. }else{
  31. this.disabled = false;
  32. this.$msg({
  33. text:e.msg,
  34. type:'info'
  35. })
  36. }
  37. })
  38. },

效果图

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

vue+vant 上传图片需要注意的事项的更多相关文章

  1. vue + vant 上传图片之压缩图片

    <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count= ...

  2. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  3. Vue实现上传图片功能

    前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...

  4. Vue响应式原理以及注意事项

    响应基于 set 和 get(Object.defineProperty) 类型: 单向绑定 双向绑定 简单例子(基于Object.defineProperty) <!DOCTYPE html& ...

  5. vue 项目 使用sass以及注意事项

    vue 项目 使用sass以及注意事项 1,安装依赖: npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通 ...

  6. vue+vant实现购物车的全选和反选业务,带你研究购物车的那些细节!

    前言 喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例. 正文 首 ...

  7. 使用.Net Core+IView+Vue集成上传图片功能

    最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...

  8. vue阿里上传图片报400错误

    首先我用vue上传阿里图片用的是分片上传,分片上传由于一片是以100kb为起始的,所以当图片大小小于100kb的时候不分片,可以正常上传,当大于100kb的时候,会报400错误如下 One or mo ...

  9. vue 拍照上传图片 demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 题解 CF786B 【Legacy】

    本题要求我们支持三种操作: ① 点向点连边. ② 点向区间连边. ③ 区间向点连边. 然后跑最短路得出答案. 考虑使用线段树优化建图. 建两颗线段树,入树和出树,每个节点为一段区间的原节点集合.入树内 ...

  2. Docker 入门教程(3)——Dockerfile

    Dockerfile Dockerfile是一个文本文件,用来定制镜像. 镜像是分层存储的,前一层会是下一层的基础.而镜像的定制就是定制每一层镜像在上一层做了什么改变. Dockerfile其内包含一 ...

  3. Zookeeper ----- 系统模型

    数据模型 Zookeeper的数据模型与文件系统非常相似,唯一不同的它的每个节点(ZNode)都可以存放数据,无论父节点还是子节点. 事务ID 即前面提到的ZXID.对每个事务请求,Zookeeper ...

  4. Git日常操作指南

    git status git add . git commit -m "注释" git stash # 每次 push 前 git pull --rebase // 如果有冲突,解 ...

  5. 基于jqgrid + ashx + nhibernate的分页

    因为我目前运维的是一个webform项目,项目中未用到分页的功能,我百度了很多文章也没有一篇是结合jqgrid + ashx + nhibernate的分页,可能是因为后台要请求ashx的原因,不像m ...

  6. 爬虫(三)-之Urllib库的基本使用

    什么是Urllib Urllib是python内置的HTTP请求库 包括以下模块 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse   url解 ...

  7. LRU cache缓存简单实现

    LRU cache LRU(最近最少使用)是一种常用的缓存淘汰机制.当缓存大小容量到达最大分配容量的时候,就会将缓存中最近访问最少的对象删除掉,以腾出空间给新来的数据. 实现 (1)单线程简单版本 ( ...

  8. PHP htmlspecialchars_decode() 函数

    实例 把预定义的 HTML 实体 "<"(小于)和 ">"(大于)转换为字符:高佣联盟 www.cgewang.com <?php $str ...

  9. 如果你大学上过编程课,一定被老师提醒过:不要使用 goto 语句!

    如果你上过编程课,一定被老师提醒过:不要使用goto语句! 因为goto语句不仅让代码的可读性很差,随意的跳出还会给程序带来安全隐患. 但是这种几乎被现代编程明令禁止的语句,在计算机诞生之初却司空见惯 ...

  10. Redis好文章推荐

    文章来源:掘金   作者:敖丙 Redis-避免缓存穿透的利器之BloomFilter <我们一起进大厂>系列- Redis基础 <我们一起进大厂>系列-缓存雪崩.击穿.穿透 ...