Ant Design 實作圖檔上傳及預覽

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