vue+element上传多张图片和图片展示
前端：
文件上传使用el-upload
![]()
:http-request：替代自动上传的action
accept：接受上传的文件类型
list-type：文件列表的类型
on-preview：点击文件列表中已上传的文件时的钩子
on-remove：移除以上次的文件
limit：限制上次的文件个数
:on-exceed：超出个数限制的回调
:file-list：文件列表名称
注：对于图片的显示有特定的json格式要求，直接返回到前端的list要封装成要求的json格式才可以正常的展示，json格式要求如下：
[
{
"name": "food.jpeg",
"url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
},
{
"name": "food2.jpeg",
"url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
}
]文件预览使用el-dialog
![]()
js：
//【内容图删除事件】
handleContImgRemove: function (file, fileList) {
console.log(file, fileList);
app.productPicList.remove(file.name);
},
//内容图数量限制3张
exceedTips: function () {
this.$message.error('最多只能上传五张图片')
},
//【内容图片预览事件】
handleContImgPreview: function (file) {
this.dialogContImgUrl = file.url;
this.dialogContImgVisible = true;
},
//上传内容图
uploadProductPic: function (file) {
console.log(file)
var fd = new FormData();
fd.append('file', file.file);
var content = uploadPic(fd);
app.productPicList.push(content.attachmentId);
},
//内容图上传前的大小 格式的校验
uploadProductPicBefore: function (file) {
var fileType = file.type;
var isJpg = false;
if (fileType == 'image/jpeg' || fileType == 'image/png' || fileType == 'image/bmp') {
isJpg = true;
}
if (!isJpg) {
this.$message({
message: '上传的图标只能是jpg、png、bmp格式!',
type: 'warning'
});
}
return isJpg;
},
//移除数组中的数据
Array.prototype.indexOf = function (val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) {
return i;
}
}
return -1;
}
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
}
//上传图片
function uploadPic(data) {
var result = "";
$.utils.ajax(CTX + '/cmsProductController/uploadPic', {
type: 'post',
contentType: false,
data: data,
async: false,
processData: false,
success: function (res) {
if (res.success) {
result = res.data;
app.$message({
message: res.msg,
type: 'success'
});
} else {
app.$message({
message: res.msg,
type: 'warning'
});
return;
}
}
});
return result;
}
Java后端：
上传图片：
public VcAttachmentDo uploadPic(MultipartFile file) throws BusinessException {
//原文件名
String fileName = file.getOriginalFilename();
//文件扩展名
String suffixName = fileName.substring(fileName.lastIndexOf(BaseEnum.EN_POINT.getCode()) + 1);
//文件存储路径
String filePath = prefix + File.separator + path;
String resultPath = "";
try {
//上传图片进行路径的返回
resultPath = UploadUtil.uploadImage(filePath, file, suffixName);
} catch (Exception e) {
throw new BusinessException(CmsContentEnum.UPLOAD_FAIL.getValue(), CmsContentEnum.UPLOAD_FAIL.getCode(), e);
}
//新建附件表的实体类
VcAttachmentDo vcAttachmentDo = new VcAttachmentDo();
vcAttachmentDo.setAttachmentId(UUIDUtil.get());
vcAttachmentDo.setFileNameSrc(fileName);
vcAttachmentDo.setFileExt(suffixName);
vcAttachmentDo.setFileName(resultPath.substring(resultPath.lastIndexOf(BaseEnum.BACK_SLASH.getCode())));
vcAttachmentDo.setFilePath(path + resultPath);
vcAttachmentDo.setStatus(BaseEnum.NUM_ONE.getCode());
//将数据插入到附件表中
dao.insertSelective(VcAttachmentDo.class, vcAttachmentDo);
//将展示路径进行拼接重新设置
vcAttachmentDo.setFilePath(prefixPath + vcAttachmentDo.getFilePath());
return vcAttachmentDo;
}
上传图片的工具类：
/**
* 上传图片 没做限制，符合配置文件中大小的图片都可上传
*
* @param path
* @param file
* @param suffixName
* @return
* @throws IOException
*/
public static String uploadImage(String path, MultipartFile file, String suffixName) throws IOException {
//新文件夹 + 新文件名
String newParentPath = DateUtil.dateToNoSplashString(new Date()) + File.separator;
String filePath = newParentPath + UUIDUtil.get() + com.etom.vc.cms.utils.buenum.BaseEnum.EN_POINT.getCode() + suffixName;
String savePath = path + File.separator + filePath;
File saveFile = new File(savePath);
if (!saveFile.getParentFile().exists()) {
saveFile.getParentFile().mkdirs();
saveFile.getParentFile().setReadable(true, false);
saveFile.getParentFile().setExecutable(true, false);
saveFile.getParentFile().setWritable(true, false);
}
byte[] data = file.getBytes();
FileCopyUtils.copy(data, saveFile);
saveFile.setReadable(true, false);
saveFile.setWritable(true, false);
saveFile.setExecutable(true, false);
return (filePath).replaceAll(com.etom.vc.cms.utils.buenum.BaseEnum.FORWARD_SLASH.getCode(), com.etom.vc.cms.utils.buenum.BaseEnum.BACK_SLASH.getCode());
}展示图片时：
新建一个图片json的格式的实体类
import java.io.Serializable;
/**
* @Author 宸
* @Date: Created by 2019/1/4
* @Desc:
*/
public class ImageListVo implements Serializable {
/**
* 图片名称
*/
private String name;
/**
* 图片地址
*/
private String url;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
查询数据：
public CmsProductVo getCurrentProduct(CmsProductVo cmsProductVo) {
List cmsProductVoList = dao.find("cms.product.mapper.getCurrentProduct", cmsProductVo);
cmsProductVo = cmsProductVoList.get(0);
if (StringUtils.isNotBlank(cmsProductVo.getProductPic())) {
//用逗号将字符串分开，得到字符串数组
String[] strs = cmsProductVo.getProductPic().split(",");
//将字符串数组转换成集合list
List list = Arrays.asList(strs);
//查询图片集合的路径地址
List pathList = dao.find("cms.product.mapper.find", list);
//new一个list对象对数据进行添加
List list1 = new ArrayList();
for (int i = 0; i < pathList.size(); i++) {
ImageListVo imageListVo = new ImageListVo();
imageListVo.setUrl(prefixPath + pathList.get(i).getFilePath());
imageListVo.setName(pathList.get(i).getAttachmentId());
list1.add(imageListVo);
}
//将附件表中的主键插入到实体对象中，用于移除图片和限制张数使用
cmsProductVo.setProductPicList(list);
//将图片地址插入到需要的实体的类对象中
cmsProductVo.setProductPicPathList(list1);
}
return cmsProductVo;
}
前端将查询出来的数据的result对象中的productPicPathList赋值给:file-list文件列表的显示名称即可展示
app.productPicPathList = result.productPicPathList;