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

news2024/12/23 23:41:09

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

let formDataParams = new FormData();

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

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

  // 转换 FormData 数据 => json
  const 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.coloradmin.cn/o/1360079.html

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

相关文章

根据MySql的表名,自动生成实体类,模仿ORM框架

ORM框架可以根据数据库的表自动生成实体类&#xff0c;以及相应CRUD操作 本文是一个自动生成实体类的工具&#xff0c;用于生成Mysql表对应的实体类。 新建Winform窗体应用程序AutoGenerateForm&#xff0c;框架(.net framework 4.5)&#xff0c; 添加对System.Configuration的…

了解nginx

1&#xff0c;概念 nginx是一个轻量级、高性能的HTTP和反向代理web服务器&#xff0c;同时也是一个通用代理服务器&#xff08;TCP、UDP、IMAP、POP3、SMTP&#xff09;。 2&#xff0c;优势 轻量级&#xff0c;占用内存少&#xff0c;启动极快采用事件驱动的异步非阻塞处理方…

linux中的系统安全

一.账号安全 将非登录用户的shell设为/sbin/nologin 系统中用户有三种&#xff1a;超级管理员 普通用户 程序用户 前两种用户可以登录系统&#xff0c;程序用户不给登录 所以称为非登录用户 命令格式&#xff1a; usermod -s /sbin/nologin&#xff08;改已有用户&#…

亲测表白网制作源码,在线制作表白,无数据库上传就能用

在线制作表白网源码 没有数据库上传就能用 后台/admin 账号密码都是admin

【mars3d】批量关闭矢量数据的startFlicker()闪烁或者全部关闭startFlicker()

问题 1.graphic/entity/billboard怎么能够批量关闭startFlicker()闪烁或者 全部关闭startFlicker()呢&#xff1f; 相关链接 1.http://mars3d.cn/editor-vue.html?idgraphic/entity/billboard 2.http://mars3d.cn/apidoc.html#FlickerEntity 期望效果 1.graphic.stopFlic…

Java:爬虫htmlunit

为什么htmlunit与HttpClient两者都可以爬虫、网页采集、通过网页自动写入数据&#xff0c;我们会推荐使用htmlunit呢? 一、网页的模拟化 首先说说HtmlUnit相对于HttpClient的最明显的一个好处&#xff0c;HtmlUnit更好的将一个网页封装成了一个对象&#xff0c;如果你非要说H…

数字后端设计实现 | 数字后端PR工具Innovus中如何创建不同高度的row?

吾爱IC社区星球学员问题&#xff1a;Innovus后端实现时两种种不同高度的site能做在一个pr里面吗&#xff1f; 答案是可以的。 Innovus支持在同一个设计中中使用不同的row&#xff0c;但需要给各自子模块创建power domain。这里所说的不同高度的row&#xff0c;有两种情况。 1…

数据库高可用mha

MHA搭建的步骤 一.配置主从复制 1.初始化环境 #在四台服务器上初始化环境 systemctl stop firewalld systemctl disable firewalld setenforce 0 2.修改 Master、Slave1、Slave2 节点的主机名 #在Master上 hostnamectl set-hostname mysql1 su#在Slave1 hostnamectl set-h…

102、X^3 : Large-Scale 3D Generative Modeling using Sparse Voxel Hierarchies

简介 官网  Nvidia2023提出的一种新的生成模型&#xff0c;可生成具有任意属性的高分辨率稀疏3D体素网格&#xff0c;以前馈方式生成数百万体素&#xff0c;最细有效分辨率高达 102 4 3 1024^3 10243&#xff0c;而无需耗时的 test-time 优化&#xff0c;使用一种分层体素潜…

LeetCode 2125. 银行中的激光束数量【数组,遍历】1280

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

1.3进制,码(8421),化简规则、卡诺图化简、性质,触发器(转换与设计、应用),电路图,电路设计

十进制与原码、反码、补码之间的转换 正数的原码、反码、补码相同&#xff0c;符号位为0 负数的原码为、符号位1&#xff0c;二进制数 反码&#xff0c;符号位不变、其它取反&#xff0c; 补码为&#xff1a;反码最低有效位1 运算 卡诺图化简 奇偶校验码 检查1的个数&…

C语言编译器(C语言编程软件)完全攻略(第二十四部分:Turbo C 2.0使用教程(使用Turbo C 2.0编写C语言程序))

介绍常用C语言编译器的安装、配置和使用。 二十四、Turbo C 2.0使用教程&#xff08;使用Turbo C 2.0编写C语言程序&#xff09; 首先&#xff0c;我们给出一段完整的C语言代码&#xff1a; #include <stdio.h> int main() { puts("hello&#xff0c;world!"…

【mars3d】new mars3d.layer.GeoJsonLayer({实现多孔面遮罩mask: true,

【mars3d】new mars3d.layer.GeoJsonLayer({实现多孔面遮罩 官网测试示例&#xff1a; 1.功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 测试代码&#xff1a; export function showDraw(isFlyTo) { removeLayer() const geoJsonLayer new mars3d.layer.GeoJsonLaye…

【Spring实战】22 Spring Actuator 入门

文章目录 1. 定义2. 功能3. 依赖4. 配置5. 常用的应用场景1&#xff09;环境监控2&#xff09;运维管理3&#xff09;性能优化 结论 Spring Actuator 是 Spring 框架的一个模块&#xff0c;为开发人员提供了一套强大的监控和管理功能。本文将深入探讨 Spring Actuator 的定义、…

【AI视野·今日NLP 自然语言处理论文速览 第六十八期】Tue, 2 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 2 Jan 2024 Totally 48 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers A Computational Framework for Behavioral Assessment of LLM Therapists Authors Yu Ying Chiu, Ashish Shar…

使用python对二叉树的所有路径求解

对于二叉树这类结构问题&#xff0c;可能会遇到的问题中有需要求给定的一颗二叉树&#xff0c;这颗二叉树的根节点到叶子节点的所有路径的问题&#xff0c;这也是深度优先搜索算法的一个较为常见的应用。 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添…

Python|使用Missingno库可视化缺失值(NaN)

在真实世界数据集的情况下&#xff0c;数据集中的某些值丢失是非常常见的。我们将这些缺失值表示为NaN&#xff08;非数字&#xff09;值。但是要构建一个好的机器学习模型&#xff0c;我们的数据集应该是完整的。这就是为什么我们使用一些插补技术来用一些可能的值替换NaN值。…

Springboot和Spring有什么区别

SpringBoot和Spring的关系 不是&#xff1a;从马车到汽车那种交通出行的颠覆&#xff0c;从燃油车到纯电动车那种能源利用的变革&#xff0c;从人工驾驶到AI智能那种驾驶方式的升级。总之&#xff0c;不是产品的升级换代&#xff0c;不是谁要替换谁。而是&#xff1a;汽车从手…

将Django项目从本地上传至宝塔服务器(踩坑记录)

文章目录 写在前面配置本地文件配置宝塔面板解决遇到问题展示运行结果热门文章 自我介绍 ⭐2022年度CSDN 社区之星 Top6 ⭐2023年度CSDN 博客之星 Top16 ⭐2023年度CSDN 城市之星 Top2&#xff08;苏州&#xff09; ⭐CSDN Python领域 优质创作者 ⭐CSDN 内容合伙人 推荐热门…

C++初级(三)

我们这里还是在C基础上进行对C基础语法的补充学习&#xff01; 一.C数组 C数组大体和C相同&#xff0c;但是C数组还是有一定的区别的。 我们先看看C和C数组共同的易错点知识&#xff1a; 1.数组只能一次初始化。 2.如果对数组只进行一部分初始化&#xff0c;那么其他未初始…