利用ANTD写文件/图片上传

初衷

在最近的项目中，遇到需要上传图片并且预览的功能。虽然ANTD中有现成的代码，但是加了数量限制和大小限制，还是走了不少弯路。

文件上传（限制数量+限制大小）

文件上传相对比较简单，我把对数量的限制写在了OnChange()，对大小的限制写在了beforeUpload。因为看过大佬写的文章，如果beforeUpload会把多个文件当成一个文件夹，对数量产生误导，所以为了避免这种情况，尽量写在OnChange()吧。

图片上传（预览+限制数量+限制大小）

效果如图：当大于10M时，会阻止图片的上传

预览效果可以参照ANTD的照片墙photowall

这里主要讲图片大小的限制，ANTD上有个头像限制图片大小的例子，但是只能弹出message.error,并不能阻止超出限制大小的图片，或者说将符合的照片添加进fileList。以下是我修改后的代码：

正确代码：onChange限制大小的代码

问题一：超过大小限制的图片即使会有error，但依然会在页面上显示。

错误原因是我写成了这样this.setState(state => ({ fileList: [...state.fileList, file] }));当上传超过限制的图片时，fileList里面并不会添加该照片的信息，但是页面上传了！Surprise？？？虽然我有尝试写在beforeUpload里面，return false阻止上传，但是失败。。。当然有大佬看到此篇文章，并且知道原理的，可以指点一二。

问题二：图片无法预览

将对图片的限制写在beforeUpload里面，此时会出现图片无法预览。就像把图片当成了文件，当然此代码写文件限制是很完美的，但是图片就不行了。

无法预览图片的代码（可用作文件）

错误示例

结尾

第一次写，有很多专业术语表述不到位，逻辑不清晰的地方。但是一旦有了新的想法和理解会对本篇文章进行修改的，希望给其他像我一样的前端小白有帮助。