antd 图片上传遇到的坑----图片回显（Upload）

antd 图片上传遇到的坑----图片回显（Upload）

最近又被安排了一个前端的项目，遇到了一个图片上传的问题，用的是antd的Upload组件，在这遇到的问题和大家分享一下，下网可以帮到需要的人。（antd官网）

1.图片回显

这是本次最大的坑。在这里说两种回显问题；

1.页面之前保存的图片回显

我们获取图片的地址是根据id来的，发送的图片的请求后面没有.png等图片标识的后缀(如：http://****/?Id=1111111111111111),upload组件不会发送请求获取图片信息，解决方式配置图片时加type属性。

fileList={fileList}获取图片信息后放入组件fileList中的数据格式：

 const photo = res.data.map(map => {
        return {
          uid: map.id,
          status: 'done',
          type: 'image/png',
          url: http://*******/***?Id=1111111111111111
        }
      });
      setFileList(photo)

2.刚刚上传的图片回显

上传图片后图片的status属性一直是uploading状态，图片上传成功，却一直是进度条状态。
解决方法是在 onCancel={this.handleCancel}回调方法开头加setFileList([…data.fileList]);
我这边只有加在方法开始生效

const handleChange = (data) => {
    setFileList([...data.fileList]);
    //新增图片或视频  将uid置换为上传成功返回的id
    if (data.file.response) {
      if (data.file.response.success) {
        data.fileList[data.fileList.length - 1].uid = data.file.response.data.id;
      }
    }
  }

2.其他官网未显示可用配置

可配置 onSuccess={e => onSuccess(e)}获取请求返回结果

3.最后附上完整组件代码

<Upload
        action={baseUrl + "/app/photo/upload"}  //这个是图片上传的接口请求，实际开发中，要替换成你自己的业务接口
        data={file => ({
          // data里存放的是接口的请求参数
          activityId: props.location.propsId,
          userCode: '*******',
        })}
        listType="picture-card"
        fileList={fileList} //默认的图片显示
        multiple={true}
        // customRequest={customRequest}
        onChange={e => handleChange(e)}  // 每次上传图片时，都会触发这个方法
        onPreview={e => handlePreview(e)} // 点击图片缩略图，进行预览
        showUploadList={{
          showRemoveIcon: false // 不显示图片删除标识的配置
        }}
        onSuccess={e => onSuccess(e)} //接口请求后的回调，可以获取请求结果  我这里没用到
      >
        {uploadButton} 
      </Upload>