update:AntD upload组件的使用

13-React基础/08-Ant Design的基本使用.md

@@ -128,6 +128,8 @@ export default class MyComponent extends React.Component {
 ## 相关问题的链接
 
 
+
+
 ### AntD pro，跳转到详情页，携带参数
 
 - [ant design列表页，转跳到详情页，携带参数](https://blog.csdn.net/u011613356/article/details/81505883)
@@ -135,6 +137,10 @@ export default class MyComponent extends React.Component {
 - [ant design pro商品页带参数转到详情页](https://blog.csdn.net/ws995339251/article/details/86771701)
 
 
+### AntD pro ，必填项前面，显示星号
+
+- [表单必填项label上的红色*号是怎么出现的](https://github.com/ant-design/ant-design-pro/issues/2044)
+
 ### 其他问题
 
 - 面包屑层级显示问题：<https://github.com/ant-design/ant-design-pro/issues/1584>

13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md

@@ -260,7 +260,7 @@ fileList 的打印结果：
 
 （1）`response` 字段里面的数据，就是请求接口后，后台返回给前端的数据，里面包含了图片的url链接。
 
-（2）`status` 字段里存放的是图片上传的实时状态。
+（2）`status` 字段里存放的是图片上传的实时状态，包括上传中、上传完成、上传失败。
 
 （3）`thumbUrl`字段里面存放的是图片的base64编码。
 
@@ -273,14 +273,14 @@ fileList 的打印结果：
     console.log(JSON.stringify(file)); // file 是当前正在上传的 单个 img
     console.log(JSON.stringify(fileList)); // fileList 是已上传的全部 img 列表
 
-    if (file && file.response && file.response.retCode == 0) {
+
-      console.log('图片上传成功');
-      fileList.forEach(item => {
     // 【重要】将 图片的base64替换为图片的url。 这一行一定不会能少。
     // 图片上传成功后，fileList数组中的 thumbUrl 中保存的是图片的base64字符串，这种情况，导致的问题是：图片上传成功后，点击图片缩略图，浏览器会会卡死。而下面这行代码，可以解决该bug。
-        item.thumbUrl = item.response.imgUrl;
+    fileList.forEach(imgItem => {
-      });
+      if (imgItem && imgItem.status == 'done' && imgItem.response && imgItem.response.imgUrl) {
+        imgItem.thumbUrl = imgItem.response.imgUrl;
       }
+    });
 
     this.setState({
       imgList: fileList,
@@ -291,13 +291,13 @@ fileList 的打印结果：
 
 ## 新需求：编辑现有页面
 
-上面一段的代码中，我们是在新建的页面中，从零开始上传页面。
+上面一段的代码中，我们是在新建的页面中，从零开始上传图片。
 
-现在有个新的需求：如何编辑现有的页面呢？也就是说说，现有的页面中，是默认有几张图片的。当我编辑这个页面时，可以对现有的图片做增删，也能增加新的图片。
+现在有个新的需求：如何编辑现有的页面呢？也就是说，现有的页面在初始化时，是默认有几张图片的。当我编辑这个页面时，可以对现有的图片做增删，也能增加新的图片。
 
 我看到upload 组件有提供 `defaultFileList` 的属性。我试了下，这个`defaultFileList` 的属性根本没法儿用。
 
-那就只要手动实现了。我的model层代码，是用 redux 写的。实现思路如下：
+那就只要手动实现了。我的model层代码，是用 redux 写的。整体的实现思路如下：（这个也是在真正在实战中用到的代码）
 
 （1）PicturesWall.js：
 
@@ -325,14 +325,13 @@ class PicturesWall extends PureComponent {
 
   handleChange = ({ file, fileList }) => {
     const { dispatch } = this.props;
-    if (file && file.response && file.response.retCode == 0) {
-      console.log('图片上传成功');
-      fileList.forEach(item => {
     // 【重要】将 图片的base64替换为图片的url。 这一行一定不会能少。
     // 图片上传成功后，fileList数组中的 thumbUrl 中保存的是图片的base64字符串，这种情况，导致的问题是：图片上传成功后，点击图片缩略图，浏览器会会卡死。而下面这行代码，可以解决该bug。
-        item.thumbUrl = item.response.imgUrl;
+    fileList.forEach(imgItem => {
-      });
+      if (imgItem && imgItem.status == 'done' && imgItem.response && imgItem.response.imgUrl) {
+        imgItem.thumbUrl = imgItem.response.imgUrl;
       }
+    });
 
     dispatch({
       type: 'mymodel/setImgList',
@@ -398,9 +397,26 @@ class PicturesWall extends PureComponent {
   handleSubmit = e => {
     const { dispatch, form } = this.props;
     e.preventDefault();
+
+    const {
+      mymodel: { imgList }, // 从props中拿默认的图片数据
+    } = this.props;
+
     form.validateFieldsAndScroll((err, values) => {
       // values 是form表单里的参数
       // 点击按钮后，将表单提交给后台
+
+
+      // start 问题描述：当编辑现有页面时，如果针对已经存在的默认图片不做修改，则不会触发 upload 的 onChange方法。此时提交表单，表单里的 myImg 字段是空的。
+      // 解决办法：如果发现存在默认图片，则追加到表单中
+      if (!values.myImg) {
+
+        values.myImg = { fileList: [] };
+
+        values.myImg.fileList = imgList;
+      }
+      // end
+
       dispatch({
         type: 'mymodel/submitFormData',
         payload: values,
@@ -467,20 +483,13 @@ export default PicturesWall;
 import { routerRedux } from 'dva/router';
 import { message, Modal } from 'antd';
 import {
-  getTuanList,
+  getGoodsInfo,
-  getAllFactory,
+  getAllGoods,
-  getAllFactGoods,
-  createFactShop,
-  updateFactShop,
-  deleteFactShop,
-  updateFactGoodsStatus,
-  queryShopDetail,
-  createFactGoods,
 } from '../services/api';
 import { trim, getCookie } from '../utils/utils';
 
 export default {
-  namespace: 'factory',
+  namespace: 'mymodel',
 
   state: {
     form: {},
@@ -520,7 +529,7 @@ export default {
       let params = {};
       params = payload;
 
-      const response = yield call(getAllFactory, params);
+      const response = yield call(getGoodsInfo, params);
 
       console.log('smyhvae response:' + JSON.stringify(response));
       if (response.error) return;
@@ -561,7 +570,7 @@ export default {
     },
 
     *setImgList({ payload }, { call, put }) {
-      console.log('smyhvae model setImgList');
+      console.log('model setImgList');
       yield put({
         type: 'getImgList',
         payload,
@@ -589,9 +598,11 @@ export default {
 
 大功告成。
 
-
 本文感谢 ld 同学的支持。
 
+## 其他问题
+
+- [beforeUpload返回false后，文件仍然为上传中的状态](https://github.com/ant-design/ant-design/issues/8779)
 
 ## 最后一段
 
@@ -603,8 +614,3 @@ export default {
 
 
 
-
-
-
-
-