ant design 预览图片_AntD框架的upload组件上传图片时遇到的一些坑

前言

本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。

前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。下面来列举几个。

备注：本文写于2019-03-02，使用的 antd 版本是 3.13.6。

使用 AntD 的 upload 组件做图片的上传

因为需要上传多张图片，所以采用的是照片墙的形式。上传成功后的界面如下：

(1)上传中：

(2)上传成功：

(3)图片预览：

按照官方提供的实例，特此整理出项目开发中的完整写法，亲测有效。代码如下：

/* eslint-disable */import { Upload, Icon, Modal, Form