antd上传控件的使用方法及问题解决
**
And Design Upload控件所遇到的问题
**
在使用控件的时候出现了一些小问题，这里分享我所学到的东西，包括我所遇到的问题，接入正题。
项目中我使用的是React+antd所搭建的项目，
我是一个前端菜鸟 第一次分享内容 还请各位嘴下留情。
我所使用的是照片墙组件
我需要在上传的时候对图片做出一些限制，在这里使用了antd里限制
shuffUpload = file => {
//限制图片 格式、size、分辨率
const isJPG = file.type === 'image/jpeg';
const isJPEG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const limit = file.size / 1024 < 200;
if (!(isJPG || isJPEG || isPNG)) {
message.error(
'只能上传JPG 、JPEG 、 PNG格式的图片~',
);
} else if (!limit) {
message.error(
'超过200KB限制，不允许上传~',
);
}
}
在使用了控件里的限制，上传的时候出现了问题，提示错误
在这里请求拦截了，但是提示错误，图片还是在页面上显示了。
我的限制是在beforeUpload中执行的。他是在我change事件之前执行 条件不允许返回false 停止上传 但是他还是调用了一次change事件，所以后续修改为pormise
返回
```javascript
shuffUpload = file => {
//限制图片 格式、size、分辨率
const isJPG = file.type === 'image/jpeg';
const isJPEG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const limit = file.size / 1024 < 200;
if (!(isJPG || isJPEG || isPNG)) {
message.error(
'只能上传JPG 、JPEG 、 PNG格式的图片~',
);
} else if (!limit) {
message.error(
'超过200KB限制，不允许上传~',
);
}
return new Promise((resolve, reject) => {
if (!(isJPG || isJPEG || isPNG)) {
reject(file);
} else if (!limit) {
reject(file);
} else {
resolve(file);
}
});
}
当他条件不成立执行当前 reject返回
这是我第一个所遇到的问题
第二个问题是放大的时候页面无法点开
问题原因是把图片转换为Base64格式所以点击的时候存在无法点开的错误
```javascript
```javascript
shuffChange = ({ file, fileList }) => {
fileList.forEach(item => {
if (item && item.status === 'done' && item.response && item.response.imgUrl) {
item.thumbUrl = item.response.imgUrl;
}
})
this.setState({
fileList: fileList
})
我们可以把imgUrl图片给赋值给thumbUrl
thumbUrl是一段字符串，只需要把请求到url地址重新赋值给他就可以了。
```javascript
```javascript
{uploadButton}
分享控件的使用方法
1. action 是我们请求的地址
2. fileList是我照片墙的列表 img地址
3. multiple 是多选 存在同时选择多张图片上传
4. showUploadList 在列表显示多张图片
5. onPreview 是点击放大
6. onChange 当我点击图片上传执行的事件 在beforeUpload后面
7. onRemove 删除 图片
8. beforeUpload 点击上传的对于图片的一些操作存在
有不足的地方请多指教，谢谢各位大佬了,一枚挖坑填坑的前端菜鸟，再见！！！