Vant Uploader上传文件 + 提交按钮上传(前后端)
安卓版PDA对设备故障进行报修。①在提交表单的时候需要同时提交故障照片,②图片单选。上传组件使用了 `Vant v2.12.47` 中的 Uploader 组件,但是官方文档只是对单个组件的前端说明。最近才开始用 Vant,不太熟悉,在网上找了些使用方法,感觉零零碎碎的,而且不知道后端代码如何承接参数。在此做一下使用方面的代码总结。
·
一、需求及前言
公司项目需要,使用安卓版PDA对设备故障进行报修。①在提交表单的时候需要同时提交故障照片
,②图片单选
。
上传组件使用了 Vant v2.12.47
中的 Uploader 组件,但是官方文档只是对单个组件的前端说明。最近才开始用 Vant,不太熟悉,在网上找了些使用方法,感觉零零碎碎的,而且不知道后端代码如何承接参数,也借鉴了一些,在此做一下使用方面的代码总结。
二、代码效果
其实很简单,就是选择照片->点击按钮提交表单和照片。
二、代码
1. template
<van-form @submit="onSubmit">
<!-- ...中间表单的省略了... -->
<van-field
label="故障照片">
<template #input>
<!-- 考虑到除了新增,修改时也要用到这个页面,且只有单张照片,而且数据库里直接存的路径,在这里可以展示一下已经上传的图片,也可以做点击预览 -->
<van-image
:src="reportForm.reportPic"
fit="contain" v-if="reportForm.reportPic != ''"/>
<!-- 图片选择,上传前判断格式,删除前做数据处理 -->
<van-uploader
v-model="reportPic"
:after-read="afterRead"
:before-delete="beforeDelete"
:max-count="1" />
</template>
</van-field>
<div style="margin: 10px">
<van-button block type="info" native-type="submit">提交</van-button>
</div>
</van-form>
2. script
let forms = null; //设置公共变量,用来创建 FromData 对象,把文件带到后台
export default {
data() {
return {
//表单
reportForm: {
equipRepairNo: '',//数据库主键
//...
reportPic: '', //这个是数据库中存的路径,可以用来直接预览
},
//组件中绑定的照片属性
reportPic: [],
}
},
methods: {
//提交表单
onSubmit(values){
Dialog.confirm({
title: '提示',
message: '确认提交吗?'
}).then(() => {
//1.axios提交表单信息
axios({
method: "post",
url: "/xxx/submit",
data: this.reportForm
}).then((res) => {
if(res.code == 200){
Toast.success(res.msg);
this.reportForm.equipRepairNo = res.data;
//2.表单提交完成后再提交图片信息
this.reportPicUpload();
}else{
Toast.fail(res.msg);
}
});
}).catch(() => {});
},
//图片选择后回调,这里就是重点了,就是在选择照片后,将照片的信息封装到FormData对象中
//注意我这里是单图上传,所以直接new了,如果是多图的话,应该要考虑添加和删除FormData中的元素
afterRead(file){
//创建FormData对象。上传图片需要转换二进制,这里要用到FormData
forms = new FormData();
//"file"表示给后台传的属性名字
forms.append("file", file.file); //获取上传图片信息
},
//图片上传的前置处理
beforeRead(file) {
if (file.type !== 'image/jpeg' || file.type !== 'image/jpg' || file.type !== 'image/png') {
Toast('请上传图片格式');
return false;
}
return true;
},
//图片删除前回调,删除时将公共变量forms中的文件信息一并删除
beforeDelete(file){
forms = null;
return true;
},
//图片上传,由提交按钮调用本方法实现手动上传
reportPicUpload(){
//如果文件列表为空,则不需要调用上传
if(forms == null || forms.length == 0){
return;
}
axios({
method: "post",
url: "/xxx/reportPicUpload",
data: forms,
params: {
equipRepairNo: this.reportForm.equipRepairNo
}
}).then((res) => {
if(res.code == 200){
Toast.success(res.msg);
this.reportForm.reportPic = res.data;
this.getRepairInfoByNo(this.reportForm.equipRepairNo);
}else{
Toast.fail(res.msg);
}
}).catch((err) => {
Toast.fail("图片上传失败");
});
},
}
}
3. 后台接收
//维修照片上传
@RequestMapping("/repairPicUpload")
@ResponseBody
public Map repairPicUpload(@RequestParam("file") MultipartFile file, @RequestParam Map<String, String> map) {
String equipRepairNo = map.get("equipRepairNo");
return equipmentRepairService.picUpload(file, equipRepairNo);
}
这里只是为了向大家展示后台接收参数的方法,更多关于使用 Java 上传文件到服务器
的细节,可以参考我这篇博客。
总结
这里只是对文件伴随表单提交的简单实现,实际上还可以对此进行许多的改进。
不足之处,还请多多指教。
更多推荐
已为社区贡献2条内容
所有评论(0)