From 4b457a5aded2ed3838e1ec237f1aedfe1f2d3323 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Sat, 2 Mar 2019 13:46:31 +0800
Subject: [PATCH] update img and fix typos

---
 03-JavaScript基础/02-变量.md                  | 10 +++----
 03-JavaScript基础/03-变量的强制类型转换.md    |  4 +--
 ...ntD框架的upload组件上传图片时遇到的一些坑.md | 28 ++++++++++++++++---
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/03-JavaScript基础/02-变量.md b/03-JavaScript基础/02-变量.md
index 2a53c6b..8e63abd 100644
--- a/03-JavaScript基础/02-变量.md
+++ b/03-JavaScript基础/02-变量.md
@@ -187,11 +187,11 @@ implements、import、int、interface、long、native、package、private、prot
 控制台输出如下：
 
 ```
-	sting
-	sting
-	sting
-	sting
-	sting
+	string
+	string
+	string
+	string
+	string
 ```
 
 注意事项：
diff --git a/03-JavaScript基础/03-变量的强制类型转换.md b/03-JavaScript基础/03-变量的强制类型转换.md
index 0a45416..bdd9d47 100644
--- a/03-JavaScript基础/03-变量的强制类型转换.md
+++ b/03-JavaScript基础/03-变量的强制类型转换.md
@@ -28,7 +28,7 @@ console.log(a + 'haha');  // 转换成 String 类型
 举例如下：
 
 ```
-变量.toSting()
+变量.toString()
 ```
 
 【重要】该方法**不会影响到原变量**，它会将转换的结果返回。当然我们还可以直接写成`a = a.toString()`，这样的话，就是直接修改原变量。
@@ -159,7 +159,7 @@ String(变量)
     console.log(parseInt(a));  //打印结果：NaN （因为是先将a转为字符串"true"，然后然后再操作）
 
     var b = null;
-    console.log(parseInt(b));  //打印结果：NaN  （因为是先将b转为字符串"null"，然后然后再操作）    
+    console.log(parseInt(b));  //打印结果：NaN  （因为是先将b转为字符串"null"，然后然后再操作）
 
     var c = undefined;
     console.log(parseInt(c));  //打印结果：NaN  （因为是先将b转为字符串"undefined"，然后然后再操作）
diff --git a/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md b/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md
index 1b74e34..51ba92f 100644
--- a/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md
+++ b/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md
@@ -3,12 +3,26 @@
 
 本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 [upload](https://ant.design/components/upload-cn/) 组件。
 
-前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。
+前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。下面来列举几个。
+
+备注：本文写于2019-03-02，使用的 antd 版本是 3.13.6。
 
 ## 使用 AntD 的 upload 组件做图片的上传
 
 因为需要上传多张图片，所以采用的是照片墙的形式。上传成功后的界面如下：
 
+（1）上传中：
+
+![](http://img.smyhvae.com/20190302_1335.png)
+
+（2）上传成功：
+
+![](http://img.smyhvae.com/20190302_1336.png)
+
+（3）图片预览：
+
+![](http://img.smyhvae.com/20190302_1331.png)
+
 按照官方提供的实例，特此整理出项目开发中的完整写法，亲测有效。代码如下：
 
 ```javascript
@@ -115,7 +129,7 @@ class PicturesWall extends PureComponent {
     return (
       <div className="clearfix">
         <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
-          <FormItem label="工厂图片" {...formItemLayout}>
+          <FormItem label="图片图片" {...formItemLayout}>
             {getFieldDecorator('myImg')(
               <Upload
                 action="//jsonplaceholder.typicode.com/posts/" // 这个是接口请求
@@ -281,8 +295,9 @@ fileList 的打印结果：
 
 现在有个新的需求：如何编辑现有的页面呢？也就是说说，现有的页面中，是默认有几张图片的。当我编辑这个页面时，可以对现有的图片做增删，也能增加新的图片。
 
-我的model层代码，是用 redux 写的。实现思路如下：
+我看到upload 组件有提供 `defaultFileList` 的属性。我试了下，这个`defaultFileList` 的属性根本没法儿用。
 
+那就只要手动实现了。我的model层代码，是用 redux 写的。实现思路如下：
 
 （1）PicturesWall.js：
 
@@ -409,7 +424,7 @@ class PicturesWall extends PureComponent {
     return (
       <div className="clearfix">
         <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
-          <FormItem label="工厂图片" {...formItemLayout}>
+          <FormItem label="图片上传" {...formItemLayout}>
             {getFieldDecorator('myImg')(
               <Upload
                 action="//jsonplaceholder.typicode.com/posts/" // 这个是接口请求
@@ -578,6 +593,11 @@ export default {
 本文感谢 ld 同学的支持。
 
 
+## 最后一段
+
+有人说，前端开发，连卖菜的都会。可如果真的遇到技术难题，还是得找个靠谱的前端同学才行。这不，来看看前端码农日常：
+
+![](http://img.smyhvae.com/20190302_1339.png)