vue+vant 上传图片需要注意的事项
<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';
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 上传图片需要注意的事项的更多相关文章
- vue + vant 上传图片之压缩图片
<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count= ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- Vue响应式原理以及注意事项
响应基于 set 和 get(Object.defineProperty) 类型: 单向绑定 双向绑定 简单例子(基于Object.defineProperty) <!DOCTYPE html& ...
- vue 项目 使用sass以及注意事项
vue 项目 使用sass以及注意事项 1,安装依赖: npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通 ...
- vue+vant实现购物车的全选和反选业务,带你研究购物车的那些细节!
前言 喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例. 正文 首 ...
- 使用.Net Core+IView+Vue集成上传图片功能
最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...
- vue阿里上传图片报400错误
首先我用vue上传阿里图片用的是分片上传,分片上传由于一片是以100kb为起始的,所以当图片大小小于100kb的时候不分片,可以正常上传,当大于100kb的时候,会报400错误如下 One or mo ...
- vue 拍照上传图片 demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 一起学Blazor WebAssembly 开发(1)
最近blazor的WebAssembly 正式版出来了,正好手头有一个项目采用的前后端分离模式做的,后端用的abp vnext(.net core 的一个很著名的框架)框架开发的,其实前端之前考虑的使 ...
- 如何利用Gitlab-ci持续部署到远程机器?
长话短说,今天聊一聊使用Gitlab-CI 自动部署到远程服务器. 如果看过<>这篇文章的朋友,会注意到我是在 Gitlab-Runner服务器上自动部署的站点,本次我们结合ssh部署到远 ...
- hdu6755 Mow
半平面交+数组模拟双端队列 人生第一次代码过两百行啊...加油加油 #include<iostream> #include<algorithm> #include<cma ...
- IO—》字节流&字符流
字节流 一.字节输出流OutputStream OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法. FileOutputStre ...
- 页面上怎么使用svg
svg标签直接在页面使用 不多说. 其他标签使用svg 除了直接使用svg标签,还有如下方法: <object data="your.svg" type="imag ...
- 移动端rem字体适配JS
// 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==r ...
- PHP date_default_timezone_get() 函数
------------恢复内容开始------------ 实例 返回默认时区: <?phpecho date_default_timezone_get();?> 运行实例 » 定义和用 ...
- PHP ftp_nb_fput() 函数
定义和用法 ftp_nb_fput() 函数上传本地一个已经打开的文件,并在 FTP 服务器上把它保存为一个文件.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_F ...
- PHP decoct() 函数
实例 把十进制转换为八进制: <?phpecho decoct("30") . "<br>";echo decoct("10&quo ...
- intel:spectre&Meltdown侧信道攻击(一)
只要平时对安全领域感兴趣的读者肯定都听过spectre&Meltdown侧信道攻击,今天简单介绍一下这种攻击的原理( https://www.bilibili.com/video/av1814 ...