Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

ant design upload 版本:2.8.3 在进行服务器上传成功后response一直为undefined,红包悬赏

1、按照官网upload配置,对图片上传成功,但解析onChangge时候,上传的图片的response一直为undefined
2、想要的结果:react用了dva脚手架,所以数据状态统一在model内管理,所以需要对response进行解析拼装数据
3、代码:

<div className="clearfix">
  <Upload
    name="uploadFile"
    action="/jsharer-web/Pic/upload"
    listType="picture-card"
    fileList={fileList}
    onPreview={handlePreview}
    onChange={handleChange}
    >
    {fileList.length >= 3 ? null : uploadButton}
  </Upload>
  <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
    <img alt="example" style={{ width: '100%' }} src={previewImage} />
  </Modal>
</div>
//采取官网配置方式解析file和filelist
function handleChange(info) {
    console.log("info");
    console.log(info);
    let fileList = info.fileList;
    console.log("fileList");
    console.log(fileList);
    fileList = fileList.slice(-2);
    fileList = fileList.map((file) => {
    console.log(file.response); //控制台输出undefined
      if (file.response) {
        console.log("#");//因为undefined所以进不来
        file.url = file.response.url;
      }
      return file;
    });
    fileList = fileList.filter((file) => {
      if (file.response) {
        return file.response.status === 'success';
      }
      return true;
    });
    //同步model内fileList数据
    // onChangeFileList(fileList);
  };

4、截图数据
//上传图片成功返回数据
clipboard.png

//fileList 控制台返回数据
clipboard.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

已解决, 可以看这个github上的这个issue
https://github.com/ant-design...
简单来说就是

对于受控模式,你应该在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...