diff --git a/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md b/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md index 09bd908..562bb7a 100644 --- a/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md +++ b/13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md @@ -76,7 +76,7 @@ class PicturesWall extends PureComponent { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { Modal.error({ - title: '超过2M限制 不允许上传~', + title: '超过2M限制,不允许上传~', }); return; } @@ -163,7 +163,6 @@ export default PicturesWall; ``` - ## 上传后,点击图片预览,浏览器卡死的问题 依据上方的代码,通过 Antd 的 upload 组件将图片上传成功后,点击图片的缩略图,理应可以在当前页面弹出 Modal,预览图片。但实际的结果是,浏览器一定会卡死。 @@ -172,7 +171,6 @@ export default PicturesWall; 上方代码中,我们可以把 handleChange(file, fileList)方法中的 `file`、以及 `fileList`打印出来看看。 `file`指的是当前正在上传的 单个 img,`fileList`是已上传的全部 img 列表。 当我上传完 两张图片后, 打印结果如下: - file的打印的结果如下: ```json @@ -201,7 +199,6 @@ file的打印的结果如下: } ``` - fileList 的打印结果: ```json @@ -255,7 +252,6 @@ fileList 的打印结果: ] ``` - 上方的json数据中,需要做几点解释: (1)`response` 字段里面的数据,就是请求接口后,后台返回给前端的数据,里面包含了图片的url链接。 @@ -293,7 +289,7 @@ fileList 的打印结果: 上面一段的代码中,我们是在新建的页面中,从零开始上传图片。 -现在有个新的需求:如何编辑现有的页面呢?也就是说,现有的页面在初始化时,是默认有几张图片的。当我编辑这个页面时,可以对现有的图片做增删,也能增加新的图片。 +现在有个新的需求:如何编辑现有的页面呢?也就是说,现有的页面在初始化时,是默认有几张图片的。当我编辑这个页面时,可以对现有的图片做增删,也能增加新的图片。而且要保证:新建页面和编辑现有页面,是共用一套代码。 我看到upload 组件有提供 `defaultFileList` 的属性。我试了下,这个`defaultFileList` 的属性根本没法儿用。 @@ -355,20 +351,29 @@ class PicturesWall extends PureComponent { const isJPEG = file.type === 'image/jpeg'; const isGIF = file.type === 'image/gif'; const isPNG = file.type === 'image/png'; + const isLt2M = file.size / 1024 / 1024 < 2; + if (!(isJPG || isJPEG || isGIF || isPNG)) { Modal.error({ title: '只能上传JPG 、JPEG 、GIF、 PNG格式的图片~', }); - return; - } - const isLt2M = file.size / 1024 / 1024 < 2; - if (!isLt2M) { + } else if (!isLt2M) { Modal.error({ - title: '超过2M限制 不允许上传~', + title: '超过2M限制,不允许上传~', }); - return; } - return (isJPG || isJPEG || isGIF || isPNG) && isLt2M && this.checkImageWH(file); + + } + + // 参考链接:https://github.com/ant-design/ant-design/issues/8779 + return new Promise((resolve, reject) => { + if (!(isJPG || isJPEG || isGIF || isPNG)) { + reject(file); + } else { + resolve(file && this.checkImageWH(file)); + } + }); + }; //返回一个 promise:检测通过则返回resolve;失败则返回reject,并阻止图片上传 @@ -596,9 +601,9 @@ export default { ``` -大功告成。 +上面的代码,可以规避 upload 组件的一些bug;而且可以在上传前,通过校验图片的尺寸、大小等,如果不满足条件,则弹出modal弹窗,阻止上传。 -本文感谢 ld 同学的支持。 +大功告成。本文感谢 ld 同学的支持。 ## 其他问题 @@ -611,6 +616,3 @@ export default { ![](http://img.smyhvae.com/20190302_1339.png) - - - diff --git a/README.md b/README.md index 5edf1bc..fce96b9 100644 --- a/README.md +++ b/README.md @@ -5,15 +5,17 @@ ### 项目介绍 +- 项目地址: + 前端入门和进阶学习笔记。从零开始学前端,做一个web全栈工程师。持续更新中... -维护这个项目的初衷,可以看这篇文章:[裸辞两个月,海投一个月,从Android转战Web前端的求职之路](https://zhuanlan.zhihu.com/p/55981212) +维护这个项目的初衷,可以看这篇文章:[裸辞两个月,海投一个月,从Android转战Web前端的求职之路](https://www.cnblogs.com/qianguyihao/p/8732781.html) 前端入门路线和推荐学习资源,可以看这篇文章:[2019年Web前端入门的自学路线](https://www.cnblogs.com/qianguyihao/p/8776837.html) ### 项目指引 -如果你发现文中的图片加载不出来,不妨[看这里](https://github.com/smyhvae/Web/issues/20#issue-390074432)。 +如果你发现文中的图片加载不出来,不妨[看这里](https:s//github.com/qianguyihao/Web/issues/20#issue-390074432)。 如果你发现本项目有内容上的错误,欢迎提交 issues 进行指正。