首页 > 其他分享 >React中AntDesign upload组件 自定义请求将多个上传请求合并成一个并

React中AntDesign upload组件 自定义请求将多个上传请求合并成一个并

时间:2024-06-17 16:44:21浏览次数:11  
标签:files const 请求 自定义 formdata upload fileList formData append

接口文档

核心代码

const ImportPictureUpload = () => {
    const [fileList, setFileList] = useState([])
    const onBeforeUpload = (file: any, fileList: any) => {
        setFileList(fileList)
        return false;
    }
    useEffect(() => {
        if(fileList.length > 0) {
            onCustomRequest().then(r => r)
        }
    }, [fileList]);

    const onCustomRequest = async () => {
            const formData = new FormData()
            fileList.map(file => {
                formData.append('files', file)
            })
            formData.append('uploadVersionNo', sessionStorage.getItem('upload-version-no'))
            const res = await KeyManServices.uploadMultiPicture(formData)
            if(res.status === 200) {
                message.success('上传成功')
            }
    }

    const props: UploadProps = {
        fileList,
        name: 'files',
        multiple: true,
        showUploadList: false,
        accept: ".png,.jpg,.jpeg",
        beforeUpload: onBeforeUpload,
    };
    return (
        <>
            <Upload {...props}>
                <Button icon={''} className="shared-colorful-btn">照片导入{fileList.length}</Button>
            </Upload>
        </>
    )
}

export default ImportPictureUpload;


请求示例

var formdata = new FormData();
formdata.append("files", fileInput.files[0], "C:\Users\fuhanchao\Desktop\xxx.txt");
formdata.append("files", fileInput.files[0], "C:\Users\fuhanchao\Desktop\xxx.xlsx");
formdata.append("files", fileInput.files[0], "C:\Users\fuhanchao\Desktop\xxx.xlsx");
formdata.append("uploadVersionNo", "111");

标签:files,const,请求,自定义,formdata,upload,fileList,formData,append
From: https://www.cnblogs.com/openmind-ink/p/18252690

相关文章

  • apisix~按域名进行请求转发
    路由route路由(Route)是请求的入口点,它定义了客户端请求与服务之间的匹配规则。路由可以与服务(Service)、上游(Upstream)关联,一个服务可对应一组路由,一个路由可以对应一个上游对象(一组后端服务节点),因此,每个匹配到路由的请求将被网关代理到路由绑定的上游服务中。如图:如果前端调用后......
  • Postman 支持的 HTTP 请求类型详解
    Postman支持的HTTP请求类型详解Postman是一款功能强大的API开发和测试工具,它支持多种类型的HTTP请求,使得开发者能够模拟客户端与服务器之间的通信。以下是对Postman支持的HTTP请求类型的详细解析。1.GET请求GET请求用于从服务器检索数据。在Postman中,你......
  • 盘点 Spring Boot 解决跨域请求的几种办法
    熟悉web系统开发的同学,对下面这样的错误应该不会太陌生。之所以会出现这个错误,是因为浏览器出于安全的考虑,采用同源策略的控制,防止当前站点恶意攻击web服务器盗取数据。01、什么是跨域请求同源策略,简单的说就是当浏览器访问web服务器资源时,只有源相同才能正常进行通信,即......
  • curl命令行发送post/get请求
    文章目录curl概述post请求get请求curl概述curl是一个命令行实用程序,允许用户创建网络请求curl在Windows、Linux和Mac上皆可使用post请求一个简单的POST请求-X:指定与远程服务器通信时将使用哪种HTTP请求方法curl-XPOSThttp://example.comPOST......
  • 5 个 JavaScript 自定义的实用函数
    嘿!......
  • 【JavaWeb】SpringBootWeb请求响应
    前言在上一次,我们开发了springbootweb的入门程序。基于SpringBoot的方式开发一个web应用,浏览器发起请求/hello后,给浏览器返回字符串“HelloWorld~”。其实呢,是我们在浏览器发起请求,请求了我们的后端web服务器(也就是内置的Tomcat)。而我们在开发web程序时呢,定义了一个控......
  • 【iOS】自定义cell及其复用机制
    文章目录cell的复用注册非注册两者的区别自定义cellcell的复用当用户滚动UITableView或UICollectionView时,只有少量可见的cell会被实际创建和显示。对于那些暂时不可见的cell,系统会将它们缓存起来以备将来复用。这就是所谓的cell复用机制。为什么需要......
  • springMVC获取请求参数
    目录4、springmvc获取请求参数4.1、通过的ServletAPI获取4.2、通过控制器方法的形参获取请求参数4.3、@RequestParam4.4、@RequestHeaher4.5、@CookieValue4.6、通过pojo获取请求参数4.7解决获取请求参数的乱码问题4、springmvc获取请求参数4.1、通过的ServletAPI获取4.2、通过......
  • 爬虫 | 异步请求aiohttp模块
    aiohttp模块,也就是asynciohttp操作#1.创建一个对象aioreq=aiohttp.ClientSession()>>>即对应异步的requests#2.用这个异步requests来发送请求resp=aioreq.get(url)#3.异步写入文件,用到aiofiles模块,pip安装,可学习:https://www.w3cschool.cn/article/86236403.h......
  • 【JAVA开发笔记】实战演练,如何用EasyExcel导出表格,并且自定义合并单元格
    目录1.前言2.EasyExcel简介3.EasyExcel简单导出案例讲解3.1EasyExcel依赖引入3.2测试类创建3.3Excel导出实现4.EasyExcel合并单元案例讲解4.1实现自定义合并策略4.2 使用自定义合并策略5.总结1.前言项目上,需将一个列表数据导出Excel表格,并将指定列相同......