Ant Design 实现图片上传及预览

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

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
@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）编写修改查询方法

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