likes
comments
collection
share

React Ant Design Upload 组件定制开发: ustomRequest 自定义上传

作者站长头像
站长
· 阅读数 12

<Form.Item
    label="Banner图"
    name="banner"
    valuePropName="fileList"
    getValueFromEvent={normFile}
>
<Upload
    name="bannerUpload"
    customRequest={uploadHandler}
    >
        <Button icon={<UploadOutlined />}>上传图片</Button>
</Upload>
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;
};