关于前端:React-Ant-Design-Upload-组件定制开发-ustomRequest-自定义上传

1次阅读

共计 578 个字符，预计需要花费 2 分钟才能阅读完成。


<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;
};

正文完