【elementUI系列】在elementUI中新建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.$ken
}
},
（三）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: urDate
}
return params
}
},
使⽤computed实现实时监测paramsData的值，只要selectedCategorySpe.categoryId，serviceForm.priority，serviceForm.title
，serviceForm.desc，urDate中只有⼀个变化，都会重新计算paramsData的值。
（四）methods部分⽅法
beforeUploadPicture(file){
const isImage = pe == 'image/png' || pe == 'image/jpg' ||  pe == 'image/jpeg' || pe == 'image/bmp' || pe == 'image/gif' || pe == 'image/webp';      const isLt2M = file.size <  1024 * 1024 * 2;
if (!isImage) {
this.$('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');
}
this.$('上传图⽚⼤⼩不能超过 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 = pe == 'image/png' || pe == 'image/jpg' ||  pe == 'image/jpeg' || pe == 'image/bmp' || pe == 'image/gif' || pe == 'image/webp';      const isLt2M = file.size <  1024 * 1024 * 2;
this.$('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');
}
if (!isLt2M) {
this.$('上传图⽚⼤⼩不能超过 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',urDate)
file[0].forEach(item => {
// 下⾯的“images”，对应后端需要接收的name，这样对图⽚和⽂件做⼀个区分，name为images为图⽚
wfForm.append('images', item.raw)
/
/ wfForm.append(item.name, file[0])
})
})
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')
Value === 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区分，哪个是⽂件，哪个是图⽚，⽤⼀次
就可以把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。ies(this.fileImage).forEach(file => {      file[1].forEach(item => {
wfForm.append(file[0], item.raw)
})
})
最后也可以看到，也是ok的
【欢迎关注，有什么问题，欢迎提出，我看到有空就回答】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。