springboot+element ui实现表单和多张图片的增加功能
作者：互联网
功能要求：图表和表单一起做增加
环境要求：springboot2.4，element ui
这里附上element ui前端代码
一.html部分
<el-form-item label="景点图片" :label-width="formLabelWidth" prop="imgUrl">
<el-input v-model="SightForm.imgUrl" v-if="false"></el-input>
<el-upload
action="#"
ref="uploadimg"
list-type="picture-card"
:auto-upload="false"
:data="SightForm"
:file-list="SightForm.imgUrl"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChange"
:http-request="uploadFile"
:before-upload="beforeAvatarUpload"
:multiple="true"
:limit="6"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
解释：
v-model="SightForm.imgUrl"里面中绑的值是你在data里面定义的SightForm对象的对象属性里面的值，这个值也可以拿出来不放在SightForm对象里面，因为这个值只在页面用，数据传输用的不是这个值。
下面附上data里面需要用的定义
二.data部分
data() {
return {
formLabelWidth: '80px',
dialogVisible: false,
dialogImageUrl: '',
SightForm: {
sightName: '',
SightDesc: '',
imgUrl: []
},
rules: {
sightName: [
{required: true, message: '请输入景点名称', trigger: 'blur'}
],
SightDesc: [
{required: true, message: '请输入景点描述', trigger: 'change'}
],
imgUrl: [{required: true, message: '请上传图片', trigger: 'blur'}],
},
formDate: ''
}
},
注意：(1)SightForm是我定义的需要传输的对象，里面放的是我定义的对象的参数，我把imgUrl拿出来在el-form-item 和el-input标签做了规则判断。
（2）ref一定要写，这是图片传输的重点；:auto-upload="false"表示不自动传输，改成手动传输；:http-request=" "这里面写你图片传输的方法，我的图片传输方法是uploadFile；:multiple="true"表示支持多文件传输；:limit="6"限制传输的文件个数。其他属性参数可以见element ui官网Upload组件，参考链接：Upload 上传
三.方法部分
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.formDate = new FormData()
this.$refs.uploadimg.submit();
this.formDate.append('name', this.SightForm.sightName);
this.formDate.append("desc", this.SightForm.SightDesc);
axios.post("/api/sight/addSight", this.formDate, {
headers: {'Content-Type': 'multipart/form-data'}
}).then((res) => {
if (res.data == "1") {
this.testreload()
}
})
.catch((err) => {
return err
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 重写upload上传方法
uploadFile(file) {
this.formDate.append('file', file.file);
},
handleChange(file, fileList) {
this.SightForm.imgUrl = fileList;
},
handleRemove(file, fileList) {
this.SightForm.imgUrl = fileList;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeAvatarUpload(file) {
console.log(file)
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
}
if (!isLt10M) {
this.$message.error('上传图片大小不能超过 10MB!');
}
return (isJPG || isPNG) && isLt10M;
}
}
注意：(1)这里用了规则验证，所以，form标签里面的ref要写你自己创建的对象。如图
（2）这里用了 axios.post，所以项目一定要安装axios，并且引入axios。如图：
（3）一定不要忘记在提交数据之前先执行图片上传方法：this.$refs.uploadimg.submit();这里的uploadimg就是el-upload组件里面ref里面的值。
（4）uploadFile方法和submitForm方法里面的类似this.formDate.append('file', file.file);的append代码，'file'就是后台的参数名字，file.file是前台页面数据。
（5）handleChange，handleRemove，handlePictureCardPreview是upload组件的图片更改，图片删除，展示图片方法，可见官网说明。beforeAvatarUpload是限制图片上传个数和大小的方法。
前端完整代码：
<template>
<div>
<el-form :model="SightForm"
:rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="景点名称" prop="sightName">
<el-input v-model="SightForm.sightName"></el-input>
</el-form-item>
<el-form-item label="景点描述" prop="SightDesc">
<el-input v-model="SightForm.SightDesc"></el-input>
</el-form-item>
<div class="imgsUpload">
<el-form-item label="景点图片" :label-width="formLabelWidth" prop="imgUrl">
<el-input v-model="SightForm.imgUrl" v-if="false"></el-input>
<el-upload
action="http://localhost:8887/sight/addSight"
ref="uploadimg"
list-type="picture-card"
:auto-upload="false"
:data="SightForm"
:file-list="SightForm.imgUrl"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChange"
:http-request="uploadFile"
:before-upload="beforeAvatarUpload"
:multiple="true"
:limit="6"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
inject: ['testreload'],
name: "SightAdd",
data() {
return {
formLabelWidth: '80px',
dialogVisible: false,
dialogImageUrl: '',
SightForm: {
sightName: '',
SightDesc: '',
imgUrl: []
},
rules: {
sightName: [
{required: true, message: '请输入景点名称', trigger: 'blur'}
],
SightDesc: [
{required: true, message: '请输入景点描述', trigger: 'change'}
],
imgUrl: [{required: true, message: '请上传图片', trigger: 'blur'}],
},
formDate: ''
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.formDate = new FormData()
this.$refs.uploadimg.submit();
this.formDate.append('name', this.SightForm.sightName);
this.formDate.append("desc", this.SightForm.SightDesc);
axios.post("/api/sight/addSight", this.formDate, {
headers: {'Content-Type': 'multipart/form-data'}
}).then((res) => {
if (res.data == "1") {
this.testreload()
}
})
.catch((err) => {
return err
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 重写upload上传方法
uploadFile(file) {
this.formDate.append('file', file.file);
},
handleChange(file, fileList) {
this.SightForm.imgUrl = fileList;
},
handleRemove(file, fileList) {
this.SightForm.imgUrl = fileList;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeAvatarUpload(file) {
console.log(file)
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
}
if (!isLt10M) {
this.$message.error('上传图片大小不能超过 10MB!');
}
return (isJPG || isPNG) && isLt10M;
}
}
}
</script>
<style scoped lang="stylus">
.imgsUpload
padding-left 1.3rem
padding-bottom 2rem
</style>
后端代码如下：
1.springboot默认上传文件大小限制在1M内，需要在配置文件中修改一下：
spring
servlet:
multipart:
max-file-size: 10MB
max-request-size: 30MB
这里设置上传文件为10M
2.保存表单的后端完整代码
@PostMapping("/sight/addSight")
@ResponseBody
public int addSight(@RequestParam(value = "name") String name,
@RequestParam(value = "desc", required = false) String desc,
@RequestParam("file") MultipartFile[] filex
) {
int res = 0;
StringBuffer filename = new StringBuffer();
if (filex == null) {
} else {
for (int i = 0; i < filex.length; i++) {
// http://localhost:8887/uploadImages/sightImages/1.jpg
String fileName = filex[i].getOriginalFilename(); // 文件名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
String path = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\uploadImages\\sightImages\\";
String filePath = path;//这个path就是你要存在服务器上的
fileName = System.currentTimeMillis() + suffixName; // 新文件名
File dest = new File(filePath + fileName);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
} else {
try {
filex[i].transferTo(dest);
System.out.println(fileName);
filename.append(fileName + ",");
} catch (IOException e) {
e.printStackTrace();
}
}
}
Sight sight = new Sight();
sight.setImgUrl(filename.toString());
//这里可以做你的表单保存等操作
res = 1;
}
return res;
}
注意：（1）@RequestParam里面的值和前端this.formDate.append里面引号里面的值对应，如果写出@RequestParam(value = "name", required = false) String name,的形式就是不强制要求传入name参数，否则就是强制要求参数，没有参数会报错。
（2）我的文件保存在static\uploadImages\sightImages\是我保存图片的目录。
这里参考了vue+element-ui+springboot 多图和表单信息一起上传
标签：springboot,SightForm,formDate,element,ui,file,message,上传,imgUrl 来源： https://blog.csdn.net/ZJ_xunyicao/article/details/112257456