前端：
文件上传使用el-upload
<el-upload:http-request="uploadProductPic"accept="image/*"list-type="picture-card":on-preview="handleContImgPreview":on-remove="handleContImgRemove"limit="5":on-exceed="exceedTips":file-list="productPicPathList"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogContImgVisible" append-to-body><img width="100%" :src="dialogContImgUrl" /></el-dialog>
:http-request：替代自动上传的action
accept：接受上传的文件类型
list-type：文件列表的类型
on-preview：点击文件列表中已上传的文件时的钩子
on-remove：移除以上次的文件
limit：限制上次的文件个数
:on-exceed：超出个数限制的回调
:file-list：文件列表名称
注：对于图片的显示有特定的json格式要求，直接返回到前端的list要封装成要求的json格式才可以正常的展示，json格式要求如下：
[{"name": "food.jpeg", "url": "/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}, {"name": "food2.jpeg", "url": "/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]
文件预览使用el-dialog
<el-dialog :visible.sync="dialogContImgVisible" append-to-body><img width="100%" :src="dialogContImgUrl" /></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 /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<CmsProductVo> cmsProductVoList = dao.find("cms.product.mapper.getCurrentProduct", cmsProductVo);cmsProductVo = cmsProductVoList.get(0); if (StringUtils.isNotBlank(cmsProductVo.getProductPic())) {//用逗号将字符串分开，得到字符串数组String[] strs = cmsProductVo.getProductPic().split(",");//将字符串数组转换成集合listList list = Arrays.asList(strs);//查询图片集合的路径地址List<VcAttachmentDo> 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;
