ElementUI实现多图片上传及回显功能
上传页面代码块
<el-upload
:action="上传到后端的URL"<!--如:http://localhost:8080/api/uploadImgs -->
list-type="picture-card"
:before-upload="beforeAvatarUpload"
:on-success="handleSuccess"
:on-remove="handleRemove"
:multiple="false"
:file-list="imgFileList" <!-- 这是回显图片的必要参数 -->
:show-file-list="true"
:limit="limitImg"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-upload>
data中的参数
data() {
return {
multiple: true,
dialogImageUrl: '',
dialogVisible: false,
imgFileList: [],
limitImg: 4,
columns: [
{
slot: 'imgPath',
prop: 'imgPath',
label: '图片',
showOverflowTooltip: true,
minWidth: 110
}
]
}
}
这里是table页上显示时使用的插槽写法
<template slot="imgPath" slot-scope="scope">
<img :src="http://localhost:8080/api/uploadImgs/20230419_4ec9954f858a4b04b6045dc005ed7cda.png" min-width="50" height="50" />
</template>
上传所需的methods方法
beforeAvatarUpload(file) {
const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
const imgSize= file.size / 1024 / 1024 < 5;
if (!imgType ) {
this.$message.error('图片只能是 JPG/PNG 格式!');
}
if (!imgSize) {
this.$message.error('图片大小不能超过 5MB!');
}
return imgType && imgSize;
},
handleSuccess(res, file, fileList) {
if (res.code === 0) {
}
},
handleRemove(file, fileList) {
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制最多可以上传${this.limit}个文件`);
}
后端代码的实现
@Value("${config.Path}")
String uploadImgPath;
@PostMapping(value = "/uploadImg",produces = "application/json;charset=UTF-8")
public Result uploadImg(@RequestParam("file") MultipartFile[] multipartFiles, HttpServletRequest request) throws IOException {
String uploadPath = uploadImgPath+ File.separator + "vehicleImages" + File.separator;
List<String> imgNameList = new ArrayList<>();
for (MultipartFile file : multipartFiles) {
if (file.isEmpty()) {
return ResultUtils.fail("传递的文件为空,文件上传失败!");
}
if (!UploadFileUtils.checkFileSize(file.getSize(), 5, "M")) {
return ResultUtils.fail("文件大小不能超过5M");
}
String fileName = file.getOriginalFilename();
String uuid = UUID.randomUUID().toString().replaceAll("\\-", "");
String suffix = fileName.substring(fileName.lastIndexOf("."));
fileName = uuid + suffix;
imgNameList.add(uploadPath+fileName);
UploadFileUtils.fileupload(file.getBytes(), uploadPath, fileName);
}
String imgPathList = String.join("&&", imgNameList);
return ResultUtils.successWithObject(imgPathList);
}
后端UploadFileUtils工具类方法
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
public class UploadFileUtils {
public static void fileupload(byte[] file, String filePath, String fileName) throws IOException {
File targetfile = new File(filePath);
if (!targetfile.exists()) {
targetfile.mkdirs();
}
if (checkFile(fileName.substring(fileName.lastIndexOf(".")))) {
FileOutputStream out = new FileOutputStream(filePath + fileName);
out.write(file);
out.flush();
out.close();
}
}
public static boolean checkFileSize(Long len, int size, String unit) {
double fileSize = 0;
if ("B".equals(unit.toUpperCase())) {
fileSize = (double) len;
} else if ("K".equals(unit.toUpperCase())) {
fileSize = (double) len / 1024;
} else if ("M".equals(unit.toUpperCase())) {
fileSize = (double) len / 1048576;
} else if ("G".equals(unit.toUpperCase())) {
fileSize = (double) len / 1073741824;
}
if (fileSize > size) {
return false;
}
return true;
}
private static boolean checkFile(String suffix) {
String suffixList = "jpg,png,bmp,jpeg,ico,xls,doc,ppt,txt,zip,pdf,tar";
suffix = suffix.substring(1);
if (suffixList.contains(suffix.trim().toLowerCase())) {
return true;
}
return false;
}
}