upload自定义相关思考

[ZhengXingchi]

参考文献

首先参考了一下阿里antd的upload组件 ant-design/components/upload/Upload.tsx

参考过程中发现阿里其实是引用了rc-upload库

其中有一些文章分享 AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为 ant design Upload组件的使用总结。

[ZhengXingchi]

纯自写upload

[ 一起学React系列 -- 8 ] React中的文件上传不推荐不要在生产环境使用

[ZhengXingchi]

关于rc-upload的思考

需求：我想在外面点击一个图片icon，实现upload中可以上传图片，如何实现？ 查了一下rc-upload的api，没有找到什么有价值的线索。翻阅了一下rc-upload的源码发现其包有两层，先是Upload.jsx，里面是AjaxUploader.jsx。然后采用React：获取函数式子组件的ref

子组件

<Form ref={props.ref}>
        <Form.Item>
            {
                  props.form.getFieldDecorator("keyword", {
                      rules: [
                          { required: true, message: "不能为空" }
                      ]
                  })(
                      <Input />
                  )
              }
          </Form.Item>
    </Form>

父组件

const childform = useRef(null);
const getChildForm = () => {
childform.current.validateFields((err, values) => {
// 子组件Form的校验回调
})
}
return (
<Row>
<ChildForm
ref={ref =>
childform.current = ref
}
/>
<Button onClick={getChildForm}>Get</Button>
</Row>
)

最后
>子组件

<Upload ref={props.onRef} {...uploaderProps}>

`

>父组件

const uploadpic=useCallback(()=>{ uploadbtn&&uploadbtn.uploader&&uploadbtn.uploader.fileInput&&uploadbtn.uploader.fileInput.click() },[]) <Upload onRef={node => {uploadbtn = node;}}>

最后又两篇文章给了我思路和灵感
[react 里面怎么触发一个点击事件？](https://segmentfault.com/q/1010000007636026)

[react父子组件之间的通信方式--最完整的Demo、最简洁的方式（子向父，父向子）](https://blog.csdn.net/sinat_36146776/article/details/104526088)