sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数
今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表。
我的思路是:
首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数。
然后,再做上传照片和文件,上传其他参数,其实也就是文件合并。
一、上传照片和其他参数
页面样式大约就是这样的,参数有优先级,发生时间,服务单名称,服务单描述,图片附件上传。
(一)视图部分代码:
<el-form-item prop="image" label="图片附件上传">
<el-upload
ref="upload"
:action="uploadAction"
:beforeUpload="beforeUploadPicture"
:on-change="imageChange"
list-type="picture-card"
name="files"
:data="paramsData"
:limit="3"
multiple
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemovePicture">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item> <el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
说明:
1、action变量为后端图片接口的地址
2、beforeUpload方法是指的上传之前触发的函数,可以用来做前端文件格式判断,文件大小判断
3、on-change方法是指每次选择文件都会触发函数,可以用来前端删除和添加照片
4、list-type属性指的是照片picture-card展示的方式
5、name指的是上传的文件字段名,这是后端确认文件流的字段名,可以随便写
6、data属性指的是上传时附带的额外参数,这是指的其他参数
7、limit属性指的是上传文件的个数极限。
8、multiple属性指的是可以每次多选文件,true为多选,false为单选
9、auto-upload属性指的是自动上传的,true为可以自动上传,false为不可以自动上传
10、on-preview方法指的是查看缩略图的方法
11、on-remove方法指的是删除文件的方法
12、ref绑定dom元素
(二)data部分代码
data () {
return {
selectedCategorySpe: this.selectedCategory,
serviceForm: {
title: '',
desc: '',
priority: '',
occurDate: ''
},
dialogImageUrl: '',
dialogVisible: false,
uploadAction: "/inner/event/order/submit/submit" + "&accessToken=" + this.$store.getters.token
}
},
(三)computed部分代码
computed: {
...mapGetters([
'constConfig'
]),
paramsData: function () {
let params = {
eventCategory: this.selectedCategorySpe.categoryId,
priority: this.serviceForm.priority,
title: this.serviceForm.title,
dsc: this.serviceForm.desc,
occurDate: this.serviceForm.occurDate
}
return params
}
},
使用computed实现实时监测paramsData的值,只要selectedCategorySpe.categoryId,serviceForm.priority,serviceForm.title
,serviceForm.desc,serviceForm.occurDate中只有一个变化,都会重新计算paramsData的值。
(四)methods部分方法
beforeUploadPicture(file){
const isImage = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
const isLt2M = file.size < 1024 * 1024 * 2;
if (!isImage) {
this.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isImage && isLt2M;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemovePicture(file, fileList) {
console.log(file, fileList);
},
imageChange(file, fileList, name) {
console.log(file, fileList);
}, confirm(){
this.$refs.upload.submit();
}
说明:confirm使用ref的绑定的upload,紧接着调用form的表单的submit方法。这个vue已经封装好了,这时候传的参数可以看到post传递的文件对象。
二、同时上传图片和文件,并且图片可以看缩略图文件显示成列表
但是当你出现这样的需求的时候,一脸蒙蔽
(一)视图部分代码
<el-form-item prop="image" label="图片附件上传">
<el-upload
ref="uploadImage"
:action="uploadAction"
:beforeUpload="beforeUploadPicture"
:on-change="imageChange"
list-type="picture-card"
name="files"
:limit="3"
multiple
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemovePicture">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item prop="image" label="文件附件上传">
<el-upload
ref="uploadFile"
class="upload-demo"
name="files"
:on-change="fileChange"
:action="uploadAction"
:on-preview="handlePreviewFile"
:on-remove="handleRemoveFile"
:before-remove="beforeRemoveFile"
multiple
:auto-upload="false"
:limit="3"
:on-exceed="handleExceedFile"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<!--<div slot="tip" class="el-upload__tip">只能上传文件,且不超过2M</div>-->
</el-upload>
</el-form-item> <el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
(2)data部分数据
data () {
return {
selectedCategorySpe: this.selectedCategory,
serviceForm: {
title: '',
desc: '',
priority: '',
occurDate: '',
},
images: {},
files: {},
dialogImageUrl: '',
dialogVisible: false
}
},
(3)method部分数据
beforeUploadPicture(file){
const isImage = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
const isLt2M = file.size < 1024 * 1024 * 2;
if (!isImage) {
this.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isImage && isLt2M;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemovePicture(file, fileList) {
console.log(file, fileList);
},
imageChange(file, fileList, name) {
console.log(file, fileList);
this.imageList = fileList;
this.images['images'] = fileList;
}, handleRemoveFile(file, fileList) {
console.log(file, fileList);
},
handlePreviewFile(file) {
console.log(file);
},
handleExceedFile(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemoveFile(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
fileChange(file,fileList) {
console.log(file, fileList);
this.fileList = fileList;
this.files['files'] = fileList;
},
confirm(){
let wfForm = new FormData();
wfForm.append( 'eventCategory',this.selectedCategorySpe.categoryId)
wfForm.append( 'priority',this.serviceForm.priority)
wfForm.append( 'title',this.serviceForm.title)
wfForm.append( 'dsc',this.serviceForm.desc)
wfForm.append( 'occurDate',this.serviceForm.occurDate)
Object.entries(this.images).forEach(file => {
file[0].forEach(item => {
// 下面的“images”,对应后端需要接收的name,这样对图片和文件做一个区分,name为images为图片
wfForm.append('images', item.raw)
// wfForm.append(item.name, file[0])
})
})
Object.entries(this.files).forEach(file => {
file[0].forEach(item => {
// 下面的“files”,对应后端需要接收的name,name为files为文件
wfForm.append('files', item.raw)
//wfForm.append(item.name, file[0])
})
})
createEventOrder(wfForm).then( res => {
console.log(res, 'res')
if(res.retValue === 1){
this.$message.success( '成功创建服务单' );
this.handleClose()
}else{ }
}) }
说明一下,新建了this.files存文件列表,this.images存图片列表。在confirm中新建一个FormData对象,使用append方法将参数变量加到数据对象中,和文件对象。最后将FormData对象传给后端。
传递的参数截图如下:
这回对images和files,图片和文件做区分,后端也需要做个判断,其他的参数不需要的参数可以选择不传,需要增加新的参数,使用append的方法添加。
2019.07.11【说明】
根据评论中提到的问题
this.files[''] = fileList;
意义不大,这个就是想用一个对象存那个文件对象,对象需要一个name,自己取一个,也可以为空。改成这样也行:
this.files['files'] = fileList;
这样做的目的是如果你的文件上传和图片上传用一个this.fileImage对象的话,在最后包装formData的时候可以通过对象的name区分,哪个是文件,哪个是图片,用一次
Object.entries(this.images).forEach
就可以把formData包装好,更符合前端的高复用,低代码的思想。
我怕有人理解不了这个,我还是补充一下代码:
(2)data部分数据(新增一个fileImage)
fileImage: {},
(3)methods中修改这块
1、图片上传的这块修改为
if(isImage && isLt2M){
this.imageList = fileList;
this.fileImage['images'] = fileList;}else{
fileList.splice(-1,1);
}
2、文件上传的这块修改为
if(!isImage && isLt2M){
this.fileList = fileList;
this.fileImage['files'] = fileList;}else{
fileList.splice(-1,1);
}
3、提交那块,把两个forEach合并成一个,然后直接取对象的name最为formData的name。
Object.entries(this.fileImage).forEach(file => { file[1].forEach(item => {
wfForm.append(file[0], item.raw)
})
})
最后也可以看到,也是ok的
【欢迎关注,有什么问题,欢迎提出,我看到有空就回答】
sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数的更多相关文章
- sau交流学习社区--songEagle开发系列:Vue.js + Koa.js项目中使用JWT认证
一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的 ...
- sau交流学习社区—vue总结:使用vue的computed属性实现监控变量变化,使用vue的watch属性监控变量变化从而实现其他业务
有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口. 同步sau交流学习社区:https://www.mwcxs.top/page/464.html ...
- sau交流学习社区第三方登陆github--oauth来实现用户登录
sau交流学习社区第三方登陆github--oauth来实现用户登录 最近在丰富nodejsBlog开发的“交流学习社区”(https://www.mwcxs.top)的其他功能以及修复一些bug. ...
- sau交流学习社区--看小说的lovebook一个无线端BS应用
一.前言 loveBook爱上阅读,是一款webapp的读小说等书籍的并且阅读的应用.如果觉得可以,欢迎fork和star. 自己最近在追斗破苍穹电视剧,下班时候在地铁上总听到有人说,斗破苍穹书籍比电 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
随机推荐
- es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)
1.函数可以设置参数默认值 function test1(x,y=1){ console.log(x,y) } test1(10)//10 1 2.rest参数:形式为...变量名 function ...
- Java开源生鲜电商平台-系统架构与技术选型(源码可下载)
Java开源生鲜电商平台-系统架构与技术选型(源码可下载) 1. 硬件环境 公司服务器 2. 软件环境 2.1 操作系统 Linux CentOS 6.8系列 2.2 反向代理/web服务器 ...
- RSAC 2018:人工智能成为驱动网络安全的新 “引擎”
作为全球顶级的权威安全会议,RSA已成为快速了解世界安全趋势的风向标,更是影响安全产业转型与持续发展的重要平台.不同于往年人工智能(AI)在安全领域更多的是一种理论探讨,今年看到的是大量人工智能在安全 ...
- Zookeeper + Dubbo + SpringMVC + dubbo-admin
第一步:在CentOS/Windows上安装Zookeeper[前提] A:CentOS Zookeeper作为Dubbo服务的注册中心,Dubbo原先基于数据库的注册中心,没采用Zookee ...
- 从数据库读取数据并动态生成easyui tree构结
一. 数据库表结构 二.从后台读取数据库生成easyui tree结构的树 1.TreeNode树结点类(每个结点都包含easyui tree 的基本属性信息) import java.io.Seri ...
- java web 开发实战经典(一)
一.jsp三种Scriptlet(脚本小程序) 1.<% %> :定义局部变量.编写语句等. <% String str = "hello world!";// ...
- RabbitMQ 安装 Your installed version of Erlang (6.2) is too old. Please install a more recent version.
windows安装RabbitMQ时在安装完Erlang语言开发包后,再安装RabbitMQ时报错: Your installed version of Erlang (6.2) is too old ...
- Spring Cloud Config - RSA简介以及使用RSA加密配置文件
简介 RSA非对称加密有着非常强大的安全性,HTTPS的SSL加密就是使用这种方法进行HTTPS请求加密传输的.因为RSA算法会涉及Private Key和Public Key分别用来加密和解密,所以 ...
- Android动态字符串拼接----%s
在开发经常遇到字符串中的某一数据或多个数据是动态变化的. 如下图 不要创建3个TextView,暂时不考虑颜色变化的情况,可以用以下做法. <string name="maintain ...
- Hibernate二级缓存简述及基于Spring4,Hibernate5,Ehcache3的二级缓存配置
Hibernate L2缓存 缓存的分类 L2缓存工作原理 放入二级缓存的数据 Ehcache 依赖 ehcache.xml 常用的memoryStoreEvictionPolicy(缓存算法) eh ...