diff --git a/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md b/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md
new file mode 100644
index 0000000..1b74e34
--- /dev/null
+++ b/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md
@@ -0,0 +1,590 @@
+
+## 前言
+
+本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 [upload](https://ant.design/components/upload-cn/) 组件。
+
+前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。
+
+## 使用 AntD 的 upload 组件做图片的上传
+
+因为需要上传多张图片，所以采用的是照片墙的形式。上传成功后的界面如下：
+
+按照官方提供的实例，特此整理出项目开发中的完整写法，亲测有效。代码如下：
+
+```javascript
+/* eslint-disable */
+
+import { Upload, Icon, Modal, Form } from 'antd';
+
+const FormItem = Form.Item;
+
+class PicturesWall extends PureComponent {
+ state = {
+ previewVisible: false,
+ previewImage: '',
+ imgList: [],
+ };
+
+
+ handleChange = ({ file, fileList }) => {
+ console.log(JSON.stringify(file)); // file 是当前正在上传的 单个 img
+ console.log(JSON.stringify(fileList)); // fileList 是已上传的全部 img 列表
+
+ this.setState({
+ imgList: fileList,
+ });
+ };
+
+
+ handleCancel = () => this.setState({ previewVisible: false });
+
+ handlePreview = file => {
+ this.setState({
+ previewImage: file.url || file.thumbUrl,
+ previewVisible: true,
+ });
+ };
+
+
+ // 参考链接：https://www.jianshu.com/p/f356f050b3c9
+ handleBeforeUpload = file => {
+ //限制图片 格式、size、分辨率
+ const isJPG = file.type === 'image/jpeg';
+ const isJPEG = file.type === 'image/jpeg';
+ const isGIF = file.type === 'image/gif';
+ const isPNG = file.type === 'image/png';
+ if (!(isJPG || isJPEG || isGIF || isPNG)) {
+ Modal.error({
+ title: '只能上传JPG 、JPEG 、GIF、 PNG格式的图片~',
+ });
+ return;
+ }
+ const isLt2M = file.size / 1024 / 1024 < 2;
+ if (!isLt2M) {
+ Modal.error({
+ title: '超过2M限制 不允许上传~',
+ });
+ return;
+ }
+ return (isJPG || isJPEG || isGIF || isPNG) && isLt2M && this.checkImageWH(file);
+ };
+
+ //返回一个 promise：检测通过则返回resolve；失败则返回reject，并阻止图片上传
+ checkImageWH(file) {
+ let self = this;
+ return new Promise(function(resolve, reject) {
+ let filereader = new FileReader();
+ filereader.onload = e => {
+ let src = e.target.result;
+ const image = new Image();
+ image.onload = function() {
+ // 获取图片的宽高，并存放到file对象中
+ console.log('file width :' + this.width);
+ console.log('file height :' + this.height);
+ file.width = this.width;
+ file.height = this.height;
+ resolve();
+ };
+ image.onerror = reject;
+ image.src = src;
+ };
+ filereader.readAsDataURL(file);
+ });
+ }
+
+ handleSubmit = e => {
+ const { dispatch, form } = this.props;
+ e.preventDefault();
+ form.validateFieldsAndScroll((err, values) => {// values 是form表单里的参数
+ // 点击按钮后，将表单提交给后台
+ dispatch({
+ type: 'mymodel/submitFormData',
+ payload: values,
+ });
+ });
+ };
+
+ render() {
+ const { previewVisible, previewImage, imgList } = this.state; // 从 state 中拿数据
+ const uploadButton = (
+
+ );
+ return (
+
+
+
+ 
+
+
+
+
+
+
+