关于antd里面upload中onChange的触发问题

这是官方阿里云上传的例子。
这是我代码中遇到的只监听一次上传状态的解答

我在onChange方法中打印了fileList有值,onChangeundefinedfileList是文件上传的状态是肯定有值的,但是onChange要在下面做判断为什么会是未定义呢?

因为这个未定义所以进不到if判断中从而无法更新fileList就导致了在onChange方法中只监听到了上传的一次状态(status: "uploading"),之后的(status: "done")就监听不到了,请求大佬解惑!

附上相关代码:

class ShopUnitDialog extends Component {
  
  ...
  
  imgChange = ({fileList}) => {
    const { onChange } = this.props
    console.log('Aliyun OSS:', fileList, onChange) // fileList有值,但是只能监听到一次,onChange未定义
    if (onChange) {
      onChange([...fileList])
    }
  }
  
  ...
  
  render () {
    const { value } = this.props
    const upload = {
      name: 'file',
      listType: 'picture',
      fileList: value,
      action: ossData.host,
      data: this.getExtraData,
      beforeUpload: this.beforeUpload
    }
    const img_upload = {
      onChange: this.imgChange,
      ...upload
    }
    return (
      <Form>
        <Item label='上传照片'>
          {getFieldDecorator('shop_door')(
            <Upload {...img_upload}>
              <div>
                <img src={UploadImg} alt='上传' width='104' height='78' />
              </div>
            </Upload>
          )}
        </Item>
      </Form>
    )
  }
}

const ShopUnitD = Form.create({})(ShopUnitDialog);
export default ShopUnitD
阅读 1.3k
评论
    1 个回答

    问题好像解决了一半,因为例子里面上传参数的fileList是从this.props里面的value值来定义的,即这个const { value } = this.props,我也不知道为什么这样写,因为我父组件根本没有定义。
    然后解决的办法是我将这个value在父组件里面定义好了,按照这个格式来定义的

    {
       uid: 'uid',      // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
       name: 'xx.png'   // 文件名
       status: 'done', // 状态有:uploading done error removed
       response: '{"status": "success"}', // 服务端响应内容
       linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    }

    然后在上传的onChange方法里面将fileList的值又重新同步到父组件定义的那个值就可以监听到后续的(status: "done")了。

    问题解决了只是有两个问题还是不太懂:

    1. 为什么用const { value } = this.propsvalue来定义fileList
    2. 为什么有一个if (onChange)判断但是我打印这个onChange又没有值。
      撰写回答

      登录后参与交流、获取后续更新提醒