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.mzph.cn/news/602043.shtml

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

相关文章

解决:TypeError: ‘tuple’ object does not support item assignment

解决&#xff1a;TypeError: ‘tuple’ object does not support item assignment 文章目录 解决&#xff1a;TypeError: tuple object does not support item assignment背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff1a;方法二&#xff1a;今天的分享就到…

【Flink精讲】Flink数据延迟处理

面试题&#xff1a;Flink数据延迟怎么处理&#xff1f; 将迟到数据直接丢弃【默认方案】将迟到数据收集起来另外处理&#xff08;旁路输出&#xff09;重新激活已经关闭的窗口并重新计算以修正结果&#xff08;Lateness&#xff09; Flink数据延迟处理方案 用一个案例说明三…

Vue+JavaSpingBoot笔记(1)

一、前后端通信参数问题 1.集合【字典】类型 Vue前端传递参数: export default {methods: { test(){// 将 filteredData 中的每一行值放入 newData 对象数组中 const newData filteredData.map(item > ({key1: item.Value1,key2: item.Value2,key3: "测试"}));r…

Rasa中的tracker_store和event_broker

Rasa 中的 tracker_store 相对主流为 Redis&#xff0c;event_broker 相对主流为 RabbitMQ。后续为了研究学习直接将 tracker_store 和 event_broker 的 type 都设置为 SQL&#xff0c;使用 MySQL 统一管理。 一.Rasa 中的 tracker_store 要使用 MySQL 作为 Rasa 的 tracker_s…

开源许可证

文章目录 一、简介二、详细信息参考 一、简介 开源是指公开源代码&#xff0c;但这并不代表就是免费的。 开源许可证是一种法律许可。 通过它&#xff0c;版权拥有人明确允许&#xff0c;用户可以免费地使用、修改、共享版权软件。 版权法默认禁止共享&#xff0c;也就是说&am…

忘记密码mysql 8.2重置root密码|macos+linux

重置密码 2024年1月6日验证 1.找到support-files下的服务 # 查找mysql位置 which mysql #/usr/local/bin/mysql# 查找原始位置 ls -al /usr/local/bin | grep mysql# 进入原始的为值找到support-files文件夹 # 注意路径要全,我这里是macos系统就是Cellar下 cd /usr/local/Cell…

如何选择消息队列?Kafka 与 RabbitMQ

在上一期中&#xff0c;我们讨论了使用消息队列的好处。然后&#xff0c;我们回顾了消息队列产品的历史。现在看来&#xff0c;当我们需要在项目中使用消息队列时&#xff0c;Kafka 是首选产品。但是&#xff0c;当我们考虑特定要求时&#xff0c;它并不总是最佳选择。 数据库…

【Kubernetes】认证授权RBAC (一)

认证授权RBAC 一、k8s安全管理&#xff1a;认证、授权、准入控制概述1.1、简介【1】认证基本介绍【2】授权基本介绍【3】准入控制基本介绍 1.2、认证【1】客户端认证【2】Bearertoken【3】Serviceaccount【4】拓展&#xff1a;kubeconfig文件 1.3、授权【1】什么是RBAC&#xf…

rust 注释文档生成 cargo doc

rust的cargo文档生成 只需要在每个函数写清楚注释&#xff0c;就可以自动生成文档&#xff0c;很方便 即不用写文档&#xff0c;又可以快速查看&#xff0c;是开发rust的必备技能 rust安装和开发环境配置&#xff0c;可以参考&#xff1a;链接 1.写注释的方法 连续三个 \ 即…

uniapp---安卓真机调试提示检测不到手机【解决办法】

最近在做APP&#xff0c;由于华为手机更新过系统&#xff0c;再次用来调试APP发现就不行了。下面给出具体的解决方法&#xff1a; 第一步&#xff1a;打开【允许开发人员选项】 找到【设置】点击【关于手机】找到【版本号】点击7次或多次&#xff0c;允许开发人员选项。 第二…

首次引入大模型!Bert-vits2-Extra中文特化版40秒素材复刻巫师3叶奈法

Bert-vits2项目又更新了&#xff0c;更新了一个新的分支&#xff1a;中文特化&#xff0c;所谓中文特化&#xff0c;即针对中文音色的特殊优化版本&#xff0c;纯中文底模效果百尺竿头更进一步&#xff0c;同时首次引入了大模型&#xff0c;使用国产IDEA-CCNL/Erlangshen-Megat…

Python中的@abstractmethod

abstractmethod 是 Python 中 abc 模块&#xff08;Abstract Base Classes&#xff09;提供的一个装饰器&#xff0c;用于声明抽象方法。抽象方法是指在抽象类中声明但没有提供具体实现的方法&#xff0c;而是由其子类提供具体实现。 使用 abstractmethod 装饰器可以使得子类在…

职业分析与计算机方向的选择、发展

文章目录 职业分析与计算机方向的选择、发展一&#xff1a;编程学习解读与职业分析1.编程的学习阶段&#xff1a;&#xff08;1&#xff09;入门阶段&#xff08;2&#xff09;熟悉阶段&#xff08;3&#xff09;学到什么程度才叫精通呢&#xff1f; 2.职业分析&#xff08;1&a…

sqoop(DataX)-MySQL导入HIVE时间格问题

这里写自定义目录标题 问题1&#xff1a;测试MySQL 数据信息HIVE数据信息hive中用 parquet&#xff08;orc&#xff09; 列式文件格式存储 解决方法问题2&#xff1a;解决方法 问题1&#xff1a; 用公司的大数据平台&#xff08;DataX&#xff09;导数&#xff0c;已经开发上线…

【ASP.NET Core 基础知识】--环境设置

一、简介 1.1 .NET Core SDK 概述 .NET Core SDK&#xff08;Software Development Kit&#xff09;是Microsoft推出的一个开源跨平台框架&#xff0c;用于开发和部署.NET应用程序。它是.NET Core平台的核心组件之一&#xff0c;为开发者提供了在多个操作系统上构建高性能、可…

YOLOv5改进 | 2023 | SCConv空间和通道重构卷积(精细化检测,又轻量又提点)

一、本文介绍 本文给大家带来的改进内容是SCConv,即空间和通道重构卷积,是一种发布于2023.9月份的一个新的改进机制。它的核心创新在于能够同时处理图像的空间(形状、结构)和通道(色彩、深度)信息,这样的处理方式使得SCConv在分析图像时更加精细和高效。这种技术不仅适…

一文详解 Java 限流接口实现

作者&#xff1a;非有 一、限流 1.1 为什么要进行限流&#xff1f; 1.瞬时流量过高&#xff0c;服务被压垮&#xff1f; 2.恶意用户高频光顾&#xff0c;导致服务器宕机&#xff1f; 3.消息消费过快&#xff0c;导致数据库压力过大&#xff0c;性能下降甚至崩溃&#xff1f…

[C]jupyter中使用C

[C]jupyter中使用C 安装使用用处 安装 https://github.com/brendan-rius/jupyter-c-kernel 下拉找到3条命令&#xff0c;装就可以了 mac和linux可用 python3可用&#xff0c; 2不可以 第二条命令可以改为 : python3 install_c_kernel 小总结&#xff1a;如果有问题&#xff0…

Vite scss 如何引入本地 字体

Vite scss 如何引入本地 字体 最近在用 Vite 改造一个旧项目 Diary&#xff0c;遇到了好多从 Vue 转到 Vite 的问题。 这次这个问题是&#xff1a; scss 里本地字体引入的问题。 一、问题描述 可以看到下面的卡片字体&#xff0c;本来应该是 impact 的&#xff0c;但现在无法…

第二部分 离散型随机变量

目录 求分布律里的未知数 例1 例2 根据X的分布律写Y的分布律 例3 根据(X,Y)的分布律写Z的分布律 例4 根据(X,Y)的分布律写边缘分布律 例5 X与Y相互独立时的联合分布律 例6 根据分布律求期望、方差 例7 求分布律里的未知数 例1 已知X的分布律为 X-202P0.40.3k ,试求k 解 0.40…