new FormData 同时发送表单 json 以及文件二进制流

需要新增时同时发送表单 json 以及对应的文件即可使用以下方法传参

let formDataParams = new FormData();

首先通过 new FormData() 创建你需要最后发送的表单

接着将你的对象 json 存储,注意使用 new Blob 创建大表单转换成 json 格式。以下是一个封装示例:

  // 转换 FormData 数据 => jsonconst transitionFormDataParams = (value: any): Blob => {return new Blob([JSON.stringify(value)], { type: "application/json" });};

通过 FormData 的 append 方法存入表单

    let project = { ...uploadGetTableRowInfo };formData.append("project", transitionFormDataParams(project));

 接着处理文件,一般是 xlsx,pdf,xls 等等

我使用的是 antd design 的 upload 组件

 const operateRowUploadFile = async ({ file }: any): Promise<void> => {
setTableRowFiles((beforeValue) => [...beforeValue, file]);

 在这里我将所有的 File 文件存储到 useState 中

  tableRowFiles.forEach((item) => formData.append("files", item));

接着发送的同时将所有的文件再次添加到 FormData 中

最后实际发送的参数效果如下:

查看源代码:

时小记,终有成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/326116.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卷积神经网络(CNN)、循环神经网络(RNN)和自注意力(self-attention)对比

考虑同一个的问题&#xff1a;将由个词元组成的序列映射到另一个长度相同的序列&#xff0c;其中的每个输入词元或输出词元由维向量表示。 我们将比较能够解决上述问题的三种常用方法&#xff1a;卷积神经网络&#xff08;CNN&#xff09;、循环神经网络&#xff08;RNN&#x…

Shape-IoU: More Accurate Metric considering Bounding Box Shape and Scale

pdf链接&#xff1a;https://pan.baidu.com/s/1T534oaZWQY65SRh0QZ3bug 提取码&#xff1a;yyds 作为检测定位分支的重要组成部分&#xff0c;边界框回归损失在目标检测任务中起着重要作用。现有的边界框回归方法通常考虑GT框和预测框之间的几何关系&#xff0c;通过相对位置和…

阿里云域名优惠口令2024年更新,注册、续费和转入可用

2024年阿里云域名优惠口令&#xff0c;com域名续费优惠口令“com批量注册更享优惠”&#xff0c;cn域名续费优惠口令“cn注册多个价格更优”&#xff0c;cn域名注册优惠口令“互联网上的中国标识”&#xff0c;阿里云优惠口令是域名专属的优惠码&#xff0c;可用于域名注册、续…

工地云平台源码,智慧工地源码,Spring Cloud智慧工地管理系统源码

智慧工地是一种基于信息技术和大数据应用的智能化管理平台&#xff0c;旨在提升建筑施工现场的安全、效率和质量。通过物联网、云计算、人工智能等技术手段&#xff0c;智慧工地可以对施工现场的各个要素进行全面感知、实时交互和智能分析&#xff0c;以实现更高效、更安全、更…

外包干了4个月,技术退步明显了...

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01; 而我已经在一个企业干了四…

element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式

目录 1.代码实现2. 效果图3. 使用到的部分属性说明4. 更多属性配置查看element官网 1.代码实现 <template><div class"TreePage"><el-checkboxv-model"menuExpand"change"handleCheckedTreeExpand($event, menu)">展开/折叠&l…

1月5日,每日信息差

第一、通用汽车2023年在华销量约210万辆&#xff0c;其中凯迪拉克品牌销量逾18.3万辆&#xff0c;别克品牌销量超51.7万辆&#xff0c;雪佛兰品牌销量约16.9万辆&#xff0c;上汽通用五菱旗下品牌合计销量逾120万辆 第二、无锡全面施行经常居住地登记户口制度。根据无锡户籍新…

docker +gitee+ jenkins +maven项目 (二)

文章目录 前言一、创建Maven项目二、常规配置1.gitee配置2.gitee仓库配置3.构建时操作4.构建后操作 总结 前言 上一篇文章介绍了Jenkins的环境配置和工具配置&#xff0c;这篇进行具体maven项目的配置 一、创建Maven项目 二、常规配置 1.gitee配置 在工具哪里配置好gitee后&…

Python(30):非对称加密算法RSA的使用(openssl生成RSA公私钥对)

Python(30)&#xff1a;非对称加密算法RSA的使用(openssl生成RSA公私钥对) 1、openssl生成RSA公私钥对 1.1、生成RSA公私钥对命令 [rootloaclhost ~]# openssl OpenSSL> genrsa -out rsa_private_key.pem 1024 Generating RSA private key, 1024 bit long modulus .. ...…

五、HTML 标题

在 HTML 文档中&#xff0c;标题很重要。 一、HTML 标题 标题&#xff08;Heading&#xff09;是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。 <h1>这是一个标题。</h1> <h2>这是一个标题。&l…

【Path的使用】Node.js中的使用Path模块操作文件路径

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;Node.js &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续前进的勇…

用Redis实现全局唯一ID

全局唯一ID 如果使用数据库自增ID就存在一些问题&#xff1a; id的规律性太明显受表数据量的限制 全局ID生成器&#xff0c;是一种在分布式系统下用来生成全局唯一ID的工具&#xff0c;一般要满足下列特性&#xff1a; 唯一性高可用递增性安全性高性能 为了增加ID的安全性…