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

文件上传和数据的参数传递在开发中是基础功能之一,通过对于参数的传递和文件的上传处理。确保了网站的完整性和丰富性。

那么在react中使用antdeaign的上传组件Upload时,我们要如何实现自定义方法的上传及参数的传递呢?

本篇文章就来介绍如何在Upload组件中使用自定义上传方法并传递参数进行判断。

关于Upload组件的自定义上传就不得不提到antdeaign提供的customRequest参数,使用方法如下:

一、项目中安装antdeaign

npm install antd --save 
yarn add antd

二、Upload使用并自定义传参

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

自定义传参的参数常见使用场景:

    1、公用方法的定义,通过对自定义参数的传递和判断。可以极大程度的实现代码重复利用,减轻工作量。

    2、通过参数的传递,可以进行一些特殊情况的判断以及上下级参数的关联完整性。

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