当前位置: 首页 > news >正文

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.lryc.cn/news/275764.html

相关文章:

  • 计算机环境安全
  • Activiti7工作流引擎:多租户
  • Postman实现压力测试
  • 爬虫工具(tkinter+scrapy+pyinstaller)
  • MySQL常用sql语句记录
  • 2024.1.4力扣每日一题——被列覆盖的最多行数
  • Elasticsearch:Serarch tutorial - 使用 Python 进行搜索 (一)
  • 第五讲_css元素显示模式
  • Shell脚本入门实战:探索自动化任务与实用场景
  • 【AI视野·今日Sound 声学论文速览 第四十二期】Fri, 5 Jan 2024
  • Java中如何使用SQLite数据库
  • kettle的基本介绍和使用
  • 数据结构第2章 栈和队列
  • Axure鲜花商城网站原型图,网上花店订花O2O本地生活电商平台
  • 【docker】centos 使用 Nexus Repository 搭建私有仓库
  • RabbitMQ(八)消息的序列化
  • 23款奔驰GLC260L升级原厂540全景影像 安装效果分享
  • 【CSS】文字描边的三种实现方式
  • 【事务】事务传播级别
  • Android WiFi 连接
  • PLC与上位机PN通讯时,如何防止连接失败?
  • LDD学习笔记 -- Linux错误码
  • 华为交换机入门(六):VLAN的配置
  • 登录验证
  • 利用Podman构建基于Fission env/builder的镜像
  • php加减乘除函数
  • Go语言学习记录——用正则表达式(regexp包)来校验参数
  • 公司办公电脑文件防泄密系统
  • 手把手带你死磕ORBSLAM3源代码(三十四)Tracking.cc MonocularInitialization编辑
  • STL标准库与泛型编程(侯捷)笔记3