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

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

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

 afterRead(file){
console.log(file); //控制台可以看见图片信息
if(this.fileList.length > ){
this.fileList.splice();
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[]);
data.append('goodsinfo',JSON.stringify(this.savewineList));
WineOrder(data).then((e)=>{
if( e.code == ){
this.disabled = false;
e.totalmoney = '';
var c ={
Topic:"",
data:e,
type:'Savewine'
}
return;
setTimeout(() => {
window.location.href="setterOrder?c="+JSON.stringify(c);
}, );
}else{
this.disabled = false;
this.$msg({
text:e.msg,
type:'info'
})
}
})
},

效果图

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

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. 一起学Blazor WebAssembly 开发(1)

    最近blazor的WebAssembly 正式版出来了,正好手头有一个项目采用的前后端分离模式做的,后端用的abp vnext(.net core 的一个很著名的框架)框架开发的,其实前端之前考虑的使 ...

  2. 如何利用Gitlab-ci持续部署到远程机器?

    长话短说,今天聊一聊使用Gitlab-CI 自动部署到远程服务器. 如果看过<>这篇文章的朋友,会注意到我是在 Gitlab-Runner服务器上自动部署的站点,本次我们结合ssh部署到远 ...

  3. hdu6755 Mow

    半平面交+数组模拟双端队列 人生第一次代码过两百行啊...加油加油 #include<iostream> #include<algorithm> #include<cma ...

  4. IO—》字节流&字符流

    字节流 一.字节输出流OutputStream OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法. FileOutputStre ...

  5. 页面上怎么使用svg

    svg标签直接在页面使用 不多说. 其他标签使用svg 除了直接使用svg标签,还有如下方法: <object data="your.svg" type="imag ...

  6. 移动端rem字体适配JS

    // 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==r ...

  7. PHP date_default_timezone_get() 函数

    ------------恢复内容开始------------ 实例 返回默认时区: <?phpecho date_default_timezone_get();?> 运行实例 » 定义和用 ...

  8. PHP ftp_nb_fput() 函数

    定义和用法 ftp_nb_fput() 函数上传本地一个已经打开的文件,并在 FTP 服务器上把它保存为一个文件.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_F ...

  9. PHP decoct() 函数

    实例 把十进制转换为八进制: <?phpecho decoct("30") . "<br>";echo decoct("10&quo ...

  10. intel:spectre&Meltdown侧信道攻击(一)

    只要平时对安全领域感兴趣的读者肯定都听过spectre&Meltdown侧信道攻击,今天简单介绍一下这种攻击的原理( https://www.bilibili.com/video/av1814 ...