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.origin file Obj)
 }
 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  Thumb Url;
 /**
 *图片地址
 */
 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
@Transactional
public 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’）修改方法需要将原来所有附件删除，然后再重新上传

 @Override
public 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;
}