sau交流学习社区--在element-ui中新建FormData对象组合上传图片
|
今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。 我的思路是： 首先，只上传附件照片，这个直接看ele的官方例子就行，不仅仅上传附件照片，还同时上传其他参数。 然后，再做上传照片和文件，上传其他参数，其实也就是文件合并。 ?同步到sau交流学习社区： 一、上传照片和其他参数页面样式大约就是这样的，参数有优先级，发生时间，服务单名称，服务单描述，图片附件上传。
（一）视图部分代码： <el-button size="mini" type="primary" @click="confirm()">确 定 说明： 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部分代码 ''''''''''"/inner/event/order/submit/submit" + "&accessToken=" +
（三）computed部分代码 'constConfig'=
使用computed实现实时监测paramsData的值，只要selectedCategorySpe.categoryId，serviceForm.priority，serviceForm.title ，serviceForm.desc，serviceForm.occurDate中只有一个变化，都会重新计算paramsData的值。 ? （四）methods部分方法 = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp'= file.size < 1024 * 1024 * 2 (!.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式!' (!.$message.error('上传图片大小不能超过 2MB!' isImage &&.dialogImageUrl =.dialogVisible =
说明:confirm使用ref的绑定的upload，紧接着调用form的表单的submit方法。这个vue已经封装好了，这时候传的参数可以看到post传递的文件对象。
二、同时上传图片和文件，并且图片可以看缩略图文件显示成列表但是当你出现这样的需求的时候，一脸蒙蔽
（一）视图部分代码 <el-button size="mini" type="primary" @click="confirm()">确 定 （2）data部分数据 ''
? （3）method部分数据 = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp'= file.size < 1024 * 1024 * 2 (!.$message.error('上传只能是png,fileList);
.imageList =.images[''] =.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + .fileList =
</span><span style="color: #0000ff;">this</span>.files[''] =<span style="color: #000000;"> fileList;
},confirm(){
let wfForm </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> FormData();
wfForm.append( </span>'eventCategory',<span style="color: #0000ff;">this</span><span style="color: #000000;">.selectedCategorySpe.categoryId)
wfForm.append( </span>'priority',<span style="color: #0000ff;">this</span><span style="color: #000000;">.serviceForm.priority)
wfForm.append( </span>'title',<span style="color: #0000ff;">this</span><span style="color: #000000;">.serviceForm.title)
wfForm.append( </span>'dsc',<span style="color: #0000ff;">this</span><span style="color: #000000;">.serviceForm.desc)
wfForm.append( </span>'occurDate',<span style="color: #0000ff;">this</span><span style="color: #000000;">.serviceForm.occurDate)
Object.entries(</span><span style="color: #0000ff;">this</span>.images).forEach(file =><span style="color: #000000;"> {
file[</span>1].forEach(item =><span style="color: #000000;"> {
wfForm.append(</span>'files'<span style="color: #000000;">,item.raw)
wfForm.append(item.name,file[</span>0<span style="color: #000000;">])
})
})
Object.entries(</span><span style="color: #0000ff;">this</span>.files).forEach(file =><span style="color: #000000;"> {
file[</span>1].forEach(item =><span style="color: #000000;"> {
wfForm.append(</span>'files'<span style="color: #000000;">,file[</span>0<span style="color: #000000;">])
})
})
createEventOrder(wfForm).then( res </span>=><span style="color: #000000;"> {
console.log(res,</span>'res'<span style="color: #000000;">)
</span><span style="color: #0000ff;">if</span>(res.retValue === 1<span style="color: #000000;">){
</span><span style="color: #0000ff;">this</span>.$message.success( '成功创建服务单'<span style="color: #000000;"> );
</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.handleClose()
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
}
})
}</span></pre>
说明一下，新建了this.files存文件列表，this.images存图片列表。在confirm中新建一个FormData对象，使用append方法将参数变量加到数据对象中，和文件对象。最后将FormData对象传给后端。 传递的参数截图如下：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
