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