V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zzlit
V2EX  ›  React

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

  •  
  •   zzlit · 2019-12-12 11:02:31 +08:00 · 3080 次点击
    这是一个创建于 1590 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是官方阿里云上传的例子。

    这是我代码中遇到的只监听一次上传状态的解答

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

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

    另外也有点搞不懂为什么要从this.propsvalue作为上传的fileList绑定值,我在父组件中也没有定义这个参数啊?

    附上我的相关代码:

    class ShopUnitDialog extends Component {
    
      /*省略部分代码*/
      
      imgChange = ({fileList}) => {
        const { onChange } = this.props
        console.log('Aliyun OSS:', fileList, onChange) // fileList 有值,onChange 未定义
        if (onChange) {
          onChange([...fileList])
        }
      }
    
      render() {
        const { visible, value, ossData, onHide } = this.props
        const { Item } = Form
        const { getFieldDecorator } = this.props.form
        const upload = {
          name: 'file',
          listType: 'picture',
          fileList: value,
          action: ossData.host,
          data: this.getExtraData,
          beforeUpload: this.beforeUpload,
          onChange: this.imgChange,
        }
        return (
          <Modal
            title="详情"
            okText='确认修改'
            cancelText='取消'
            width='860px'
            visible={visible}
            onOk={this.submit}
            onCancel={onHide}
            destroyOnClose
          >
            <Form>
              <Item label='上传照片'>
                {getFieldDecorator('upload_img')(
                  <Upload {...upload}>
                    <div>
                      <img src={UploadImg} alt='上传' width='104' height='78' />
                    </div>
                  </Upload>
                )}
              </Item>
            </Form>
          </Modal>
        )
      }
    }
    
    const ShopUnitD = Form.create({})(ShopUnitDialog);
    export default ShopUnitD
    
    
    第 1 条附言  ·  2019-12-12 20:36:51 +08:00
    问题好像解决了一半,因为例子里面上传参数的`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.props`的`value`来定义`fileList`。
    2. 为什么有一个`if (onChange)`判断但是我打印这个`onChange`又没有值。
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1807 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:25 · PVG 00:25 · LAX 09:25 · JFK 12:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.