1、首先看效果

添加产品可以上传产品图片，点击图片上的眼睛图标，可以放大预览。

2、前端实现方式

（1）首先在代码中添加<a-upload>标签，代码如下：

<a-form-model-item label="产品图片" prop="productFileList"> <a-upload :action="uploadUrl" accept=".jpg,.jpeg,.png" class="step_upload" list-type="picture-card" :v-model="form.productFileList" :file-list="form.productFileList" :before-upload="beforeUpload" :headers="headers" @preview="handlePreview" @change="handleChange" > <div v-if="form.productFileList.length < 6"> <a-icon type="plus"/> <div class="ant-upload-text"> 上传 </div> </div> </a-upload> <!-- 图片预览 --> <viewer :images="previewImage" @inited="inited" ref="viewer"> <template scope="scope"> <img style="display: none;" v-for="(src, index) in previewImage" :src="src" :key="index"/> {{ scope.options }} </template> </viewer></a-form-model-item>

（2）引入v-viewer 运行：npm install v-viewer

（3）加入引入组件：

import VueViewer from 'v-viewer'import Vue from 'vue'import storage from 'store'import { ACCESS_TOKEN } from '@/store/mutation-types'Vue.use(VueViewer)

（4）添加data：

previewImage: [],uploadUrl:process.env.VUE_APP_BASE_API + '/common/upload',headers: { Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)}

（5）添加方法

inited (viewer) { this.$viewer = viewer},beforeUpload (file) { // 文件类型(file.type)、大小限制(file.size) const isLt2M = file.size / 1024 / 1024 < 2 if (!isLt2M) { this.$message.error('图片大小限制 2MB!') } return isLt2M},getBase64 (file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) })},async handlePreview (file) { if (!file.url && !file.preview) { file.preview = await this.getBase64(file.originFileObj) } const temp = file.url || file.preview this.previewImage.push(temp) this.$viewer.show()},handleChange ({ fileList }) { this.form.productFileList = fileList console.log('fileList', fileList)}

3、后端实现方式

（1）创建文件上传的对象：

import java.util.Map;/** * 上传文件对象 * * @author */public class UploadFileVo{ public UploadFileVo(){ FileResponseVo fileResponseVo = new FileResponseVo(); this.setResponse(fileResponseVo); } /** * 状态 */ private String status; /** * 文件名 */ private String name; /** * 文件大小 */ private Integer size; /** *百分比 */ private Long percent; /** *图片唯一值 */ private String uid; /** *文件类型 */ private String type; /** *图片转成base64 */ private String thumbUrl; /** *图片地址 */ private String url; /** * 上传文件返回值 */ private FileResponseVo response; public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getSize() { return size; } public void setSize(Integer size) { this.size = size; } public Long getPercent() { return percent; } public void setPercent(Long percent) { this.percent = percent; } public FileResponseVo getResponse() { return response; } public void setResponse(FileResponseVo response) { this.response = response; } public String getUid() { return uid; } public void setUid(String uid) { this.uid = uid; } public String getType() { return type; } public void setType(String type) { this.type = type; } public String getThumbUrl() { return thumbUrl; } public void setThumbUrl(String thumbUrl) { this.thumbUrl = thumbUrl; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; }}

（2）创建文件上传引用的response对象：

/** * 上传文件对象 * * @author */public class FileResponseVo{ /** * 状态 */ private String code; /** * 文件名 */ private String fileName; /** * 文件大小 */ private Long fileSize; /** * 显示文件名 */ private String newFileName; /** * 文件上传路径 */ private String url; /** * 原始文件名 */ private String originalFilename; public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getFileName() { return fileName; } public void setFileName(String fileName) { this.fileName = fileName; } public Long getFileSize() { return fileSize; } public void setFileSize(Long fileSize) { this.fileSize = fileSize; } public String getNewFileName() { return newFileName; } public void setNewFileName(String newFileName) { this.newFileName = newFileName; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getOriginalFilename() { return originalFilename; } public void setOriginalFilename(String originalFilename) { this.originalFilename = originalFilename; }}

（3）编写产品添加方法，同时插入上传文件（注意：多文件上传主表和附件表增加附件uuid，通过uuid进行关联）

@Override@Transactionalpublic int insertCrmProduct(CrmProduct crmProduct){ crmProduct.setCreateTime(DateUtils.getNowDate()); List<UploadFileVo> productFileList = crmProduct.getProductFileList(); String productFileUuid = IdUtils.fastSimpleUUID(); for(UploadFileVo file : productFileList){ SysAttachment sysAttachment = new SysAttachment(); sysAttachment.setBusinessUuid(productFileUuid); sysAttachment.setFileNameReal(file.getResponse().getFileName()); sysAttachment.setFilePath(file.getResponse().getUrl()); sysAttachment.setFileNameShow(file.getResponse().getOriginalFilename()); sysAttachment.setFileType(file.getType()); sysAttachment.setFileSize(file.getSize()); sysAttachment.setUid(file.getUid()); sysAttachment.setThumbUrl(file.getThumbUrl()); sysAttachment.setCreateTime(new Date()); sysAttachment.setDelFlag(0); sysAttachmentMapper.insertSysAttachment(sysAttachment); } crmProduct.setPicUuid(productFileUuid); return crmProductMapper.insertCrmProduct(crmProduct);}

（4）编写修改查询方法（注意：查询方法需要给附件对象增加url属性，前端需要根据这个字段判断是新增还是添加，不然会报：Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'）修改方法需要将原来所有附件删除，然后再重新上传

@Overridepublic CrmProduct selectCrmProductByProductId(Long productId){ CrmProduct product = crmProductMapper.selectCrmProductByProductId(productId); SysAttachment sysAttachment = new SysAttachment(); sysAttachment.setBusinessUuid(StringUtils.isBlank(product.getPicUuid())?"0":product.getPicUuid()); List<SysAttachment> productFileList = sysAttachmentMapper.selectSysAttachmentList(sysAttachment); List<UploadFileVo> uploadFileVolist = new ArrayList<>(); for(SysAttachment s : productFileList){ UploadFileVo uploadFileVo = new UploadFileVo(); uploadFileVo.setName(s.getFileNameShow()); uploadFileVo.setSize(s.getFileSize()); uploadFileVo.getResponse().setUrl(s.getFilePath()); uploadFileVo.getResponse().setNewFileName(s.getFileNameShow()); uploadFileVo.getResponse().setFileName(s.getFileNameReal()); uploadFileVo.getResponse().setCode("200"); uploadFileVo.getResponse().setOriginalFilename(s.getFileNameShow()); uploadFileVo.setUid(s.getUid()); uploadFileVo.setStatus("done"); uploadFileVo.setPercent(100L); uploadFileVo.setUrl(s.getThumbUrl()); uploadFileVo.setType(s.getFileType()); uploadFileVo.setThumbUrl(s.getThumbUrl()); uploadFileVolist.add(uploadFileVo); } product.setProductFileList(uploadFileVolist); return product;}