Ant Design 实现多图片上传及预览
1、先看效果2、前端实现方式（1）在代码中添加<a-upload>标签（2）引入v-viewer 运行：npm install v-viewer（3）添加data（3）添加方法 2、后端实现方式（1）创建文件上传的对象（2）创建文件上传引用的response对象（3）编写产品添加方法，同时插入上传文件（注意：多文件上传主表和附件表增加附件uuid，通过uuid进行关联）（4）编写修改查询方法1、先看效果
添加产品可以上传产品图片，点击图片上的眼睛图标，可以放大预览。
2、前端实现方式
（1）在代码中添加标签
<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
import VueViewer from 'v-viewer'import Vue from 'vue'import storage from 'store'import { ACCESS_TOKEN } from '@/store/mutation-types'Vue.use(VueViewer)
（3）添加data
previewImage: [],uploadUrl:process.env.VUE_APP_BASE_API + '/common/upload',headers: {Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)}
（3）添加方法
inited (viewer) {this.$viewer = viewer},beforeUpload (file) {// 文件类型(file.type)、大小限制(file.size)const isLt2M = file.size / 1024 / 1024 < 2if (!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.previewthis.previewImage.push(temp)this.$viewer.show()},handleChange ({ fileList }) {this.form.productFileList = fileListconsole.log('fileList', fileList)}
2、后端实现方式
（1）创建文件上传的对象
/*** 上传文件对象** @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）编写修改查询方法
@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;}
