react中antdeaign上传组件Upload使用自定义上传方法

Ant Design设计语言是开发者常见的使用的UI框架之一,基于Ant Design可以极大便捷的减少工作量使原本繁杂的事变的简易起来。

本篇就来介绍使用Ant Design给我们带来了哪些便利,以及在使用Ant Design的过程中我们可能会遇到哪些问题以及如何解决该问题。

如:Ant Design中的Upload上传组件,调用自定义的方法进行文件的上传。

一、安装Ant Design

npm install antd --save 
yarn add antd

二、使用Ant Design

import { Upload } from "antd";
import { UploadOutlined } from '@ant-design/icons';
<Upload name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false} customRequest={customRequest} >
<UploadOutlined style={{fontSize:'30px'}}/>
</Upload>
const customRequest = async (options) => {
const { file, filename, data } = options
const formData = new FormData();
//设置file名称
formData.append("image", file);
//自定义上传方法
uploadImage(formData).then(e=>{
})
}

关键点说明:

    customRequest:通过覆盖默认的上传行为,可以自定义自己的上传实现

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!