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   点击上传的对于图片的一些操作存在



![在这里插入图片描述](https://img-blog.csdnimg.cn/201910181510553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXFpYW5nOTcwMzE1,size_16,color_FFFFFF,t_70)

有不足的地方请多指教，谢谢各位大佬了,一枚挖坑填坑的前端菜鸟，再见！！！