React Ant Design Upload 组件定制开发的几个问题

wangsying

已于 2022-02-24 10:54:38 修改

阅读量721

点赞数

分类专栏： react 文章标签： react.js 前端 reactjs upload ant

于 2022-02-24 10:19:27 首次发布

本文链接：https://blog.csdn.net/wangsying/article/details/123105650

版权

本文探讨了在React应用中使用Ant Design的Upload组件进行自定义上传操作的方法，包括设置`customRequest`属性以实现上传逻辑。同时，文章也详细介绍了如何在Form组件中使用Upload，确保其在受控状态下正确初始化`fileList`，通过`valuePropName`和`getValueFromEvent`属性进行值的处理。虽然过程中遇到了一些不便，作者对于CSDN的富文本编辑体验表达了不满。

摘要由CSDN通过智能技术生成

1.customRequest 自定义上传

customRequest={uploadHandler}

const uploadHandler = async (options: any) => {
    const { onSuccess, file } = options;
    if (!file) {
      return false;
    }
    

    const fd = new FormData();
    fd.append("file", file);
    const res = await fetch(uploadUrl, {
      method: "POST",
      credentials: "include",
      body: fd,
    });

    if (!res.ok) {
      const err = await res.json();
      return false;
    }

    const { url } = await res.json();
    console.log('image url result: ', url, file);
    
    file.url = url
    onSuccess(res, file)
    return true;
};

2.在Form中使用

Upload组件在Form中使用,会处于受控状态,所以默认值如FileList的初始化需要通过Form的setFieldsValue方法来设置

const [form] = Form.useForm();
form.setFieldsValue({
    banner: [{ uid: uuid().toString(), name: imageURL, status: 'done', url: imageURL}],
})

<Form.Item