VUE+ELEMENTUIel-upload照⽚墙⼿动上传多张图⽚保存和修改功能前后端完
整实现
版权声明：本⽂为博主原创⽂章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原⽂出处链接和本声明。
VUE+ELEMENTUI el-upload照⽚墙⼿动上传多张图⽚保存和修改功能前后端完整实现
el-upload照⽚墙上传的⽅式是，选择完⼀个⽂件后，就⽴马上传，⽽不是多个⽂件⼀块上传。这个细节在我写的时候没注意到，以⾄于时间被耗费，神经要抓狂。
将⾃动上传改为⼿动上传⽅式的话，就需要我们⾃⼰创建新的formdata对象，以便得到选择的图⽚⽂件，能传到后端。后端使⽤MultipartFile[] multipartFiles接收。
点击保存按钮时，需要对form表单数据⼊库和图⽚⽂件上传到本地两部分操作。实现的思路是，当图⽚上传成功后返回图⽚的name集合，将集合传到后端，然后对name集合循环进⾏⼊库即可。
效果：
如下：
前端
<template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @native="dataFormSubmit()" label-width="80px">
<el-row>
<el-col>
<el-form-item label="单位名称" prop="groupName">
<el-input v-model="upName" placeholder="单位名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="负责⼈" prop="groupManager">
<el-input v-model="upManager" placeholder="负责⼈"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-row>
<el-row>
<el-col>
<el-form-item label="联系⽅式" prop="telephone">
<el-input v-model="lephone" placeholder="联系⽅式" maxlength="11"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item :class="{hide:hideUpload}">
<el-upload ref="upload" action="#" multiple :limit="limit" :file-list="dataForm.imgFileList" list-type="picture-card"
:on-preview="handlePictureCardPreview" :on-change="OnChange" :on-remove="handleRemove" :on-exceed="handleExceed"      accept="image/jpeg,image/png" :auto-upload="false">
<i class="el-icon-plus"></i>
<div class="el-upload__tip" slot="tip">只能上传jpg/png⽂件，最多上传5张且单张图⽚不超过5M
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="submitUpload()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
import {
isMobile
} from '@/utils/validate'
export default {
data() {
var validateMobile = (rule, value, callback) => {
if (!isMobile(value)) {
callback(new Error('联系⽅式格式错误'))
} else {
callback()
}
}
return {
visible: false,
uploadUrl: '',
dialogImageUrl: '',
dialogVisible: false,
limit: 5,
hideUpload: false, //是否显⽰上传图⽚的加号
imgInfoList: [], //包含图⽚的id,name,size的集合
imgNameList: [], //后端返回的上传图⽚的name集合，传到后端
imgSize: [], //后端返回的上传图⽚的imgSize集合，传到后端
deleteImgFileList: [], //存已被删除了的图⽚的id
dataForm: {
id: 0,
groupName: '',
groupManager: '',
telephone: '',
imgFileList: []//绑定⽤户上传的图⽚List
},
dataRule: {
groupName: [{
required: true,
required: true,
message: '单位名称不能为空',
trigger: 'blur'
}],
groupManager: [{
required: true,
message: '负责⼈不能为空',
trigger: 'blur'
}],
telephone: [{
required: true,
message: '联系⽅式不能为空',
trigger: 'blur'
}]
}
}
},
methods: {
/
/点击上传图⽚
submitUpload() {
let formData = new FormData(); //  ⽤FormData存放上传⽂件    this.dataForm.imgFileList.forEach(file => {
console.log(file.raw)
console.log(file.size)
formData.append('file', file.raw)
})
this.$http({
url: this.uploadUrl,
method: 'post',
data: formData,
headers: {
"Content-Type": "multipart/form-data"
}
}).then(({
data
}) => {
if (data && de === 0) {
for (var i = 0; i < data.imgNameList.length; i++) {
this.imgNameList.push(data.imgNameList[i].name)
this.imgSize.push(data.imgNameList[i].size)
}
this.dataFormSubmit()
this.$refs.upload.clearFiles();
} else {
this.$(data.msg)
}
})
},
//预览图⽚时
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
OnChange(file, fileList) {
const isType = pe === 'image/jpeg' || 'image/png'
const isLt5M = file.size / 1024 / 1024 < 5
if (!isType) {
this.$('上传头像图⽚只能是 JPG 格式!');
fileList.pop()
}
if (!isLt5M) {
this.$('上传头像图⽚⼤⼩不能超过 5MB!');
fileList.pop()
}
this.dataForm.imgFileList.push(file)
this.dataForm.imgFileList.push(file)
this.hideUpload = fileList.length >= this.limit
},
//删除图⽚时
getsavefilenamehandleRemove(file, fileList) {
if (file.id) {
console.log('删除了已被上传过的图⽚')
console.log(file.id)
this.deleteImgFileList.push(file.id)
}
this.dataForm.imgFileList = fileList
this.hideUpload = fileList.length >= this.limit
},
//⽂件超出个数限制时
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个⽂件，本次选择了 ${files.length} 个⽂件，共选择了 ${files.length + fileList.length} 个⽂件`);  },
//获取图⽚信息
getImgInfo(id) {
this.$http({
url: this.$http.adornUrl('/sys/sysgroup/queryImgByGroupId'),
method: 'get',
params: this.$http.adornParams({
'id': id
})
}).then(({
data
}) => {
if (data && de === 0) {
if (data.imgInfoList.length === 5) {
this.hideUpload = true
}
for (var i = 0; i < data.imgInfoList.length; i++) {
this.dataForm.imgFileList.push({
"url": window.SITE_CONFIG.imgUrl + data.imgInfoList[i].fileName,
'name': data.imgInfoList[i].fileName,
'size': data.imgInfoList[i].imgSize,
"id": data.imgInfoList[i].id
})
}
}
})
},
init(id) {
this.dataForm.imgFileList = []
this.imgNameList = []
this.imgSize = []
this.deleteImgFileList = []
this.dataForm.id = id || 0
this.visible = true
this.hideUpload = false
this.uploadUrl = this.$http.adornUrl(`/sys/sysgroup/upload?token=${this.$('token')}`)
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
//回显图⽚
this.$http({
url: this.$http.adornUrl(`/sys/sysgroup/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({
data
}) => {
}) => {
if (data && de === 0) {
upName = upName
upManager = upManager
lephone = lephone
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/sys/sysgroup/${!this.dataForm.id ? 'save' : 'update'}`),      method: 'post',
params: this.$http.adornParams({
'id': this.dataForm.id || undefined,
'groupName': upName,
'groupManager': upManager,
'telephone': lephone,
'imgNameList': this.imgNameList.join(","),
'deleteImgFileList': this.deleteImgFileList.join(","),
'imgSize': this.imgSize.join(","),
'cuser': this.$('userId'),
'muser': this.$('userId')
})
}).then(({
data
}) => {
if (data && de === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.hideUpload = false
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$(data.msg)
}
})
}
})
}
}
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
后端
controller.java

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