JSON对象转成formData对象,formData对象转成JSON

在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码

 const formData = new FormData();
Object.keys(params).forEach((key) => {
formData.append(key, params[key]);
});

下面也有可能需要formData转JSON,代码如下:

var jsonData = {};
formData.forEach((value, key) => jsonData[key] = value);
 mypost1() {
let url = 'http://1.1.1.1:8080/AA/pAA/kAAAin/quAA';
let params = {
AA: '',
SS: '',
DD: '1'
}
const formData = new FormData();
Object.keys(params).forEach((key) => {
formData.append(key, params[key]);
});
console.log(formData)
this.http.post(url, formData).subscribe({
next: (res: any) => {
if (res.status === 'success') {
} else { if (!res.message || res.message === 'error') { this.msg.error('...') } else { this.msg.error(res.message); } }
}, error: (err: any) => { }
})
}

前端向后端发送请求(FormData),你们不要吐槽我,有的时候我也不想写注释的更多相关文章

  1. 向.net后端发送请求获取数据,在前端动态填充表格

    实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...

  2. Python Django 前后端数据交互 之 前端向后端发送数据

    Python Django 之 前端向后端发送数据

  3. java后端发送请求

    package com.ty.mapapisystem.util; import java.io.BufferedReader;import java.io.FileInputStream;impor ...

  4. IE浏览器因缓存问题未能成功向后端发送请求的几个解决办法

    这段时间前后端联调,解决IE.谷歌等浏览器兼容问题,真是让人有点焦头烂额,各种奇葩问题层出不穷,旧问题刚去,新麻烦又来,其中尤其以IE浏览器缓存的问题最多.有若干次都是因为这个缓存,使得前端的请求没有 ...

  5. java后端发送请求并获取响应

    URL wsUrl = new URL(url); HttpURLConnection conn = (HttpURLConnection) wsUrl.openConnection(); conn. ...

  6. flask 框架 前端和后端请求超时问题

    部署模式 flask + Gunicorn + nginx 为什么要用Gunicorn + nginx ? 请看知乎大神们的回答:https://www.zhihu.com/question/3852 ...

  7. java后台发送请求并获取返回值(续)

    在java后端发送请求给另一个平台,从而给前端实现 "透传"的过程中,出现:数据请求到了并传到了前端,但是控制台打印时中文显示Unicode码而前端界面中中文显示不出来!!!开始怀 ...

  8. angularjs和jquery前端发送以http请求formdata数据

    formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...

  9. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

随机推荐

  1. Vue router简单配置入门案例

    { 注意驼峰命名法,不然会报错 } 1.在Views文件夹下创建Vue路由文件,例如: <template> </template>  <script> </ ...

  2. 论文笔记 - Noisy Channel Language Model Prompting for Few-Shot Text Classification

    Direct && Noise Channel 进一步把语言模型推理的模式分为了: 直推模式(Direct): 噪声通道模式(Noise channel). 直观来看: Direct ...

  3. nginx安装及相关操作

    工作中经常用到nginx,今天写个自动部署nginx的脚本.nginx版本选用:1.20.2 1.创建nginx安装脚本(nginx.sh) [root@iZ2ze7uphtapcv51egcm7rZ ...

  4. 线上Electron应用具备哪些特征?

    新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1 ...

  5. CentOS 8 离线安装 podman 解决方法

    CentOS 8 系统中如果没有安装Podman的话,想要离线安装会比较麻烦,因为podman依赖的包比较多,从网上一个一个下载会很繁琐,也容易出错. 这里介绍一种曲线救国的方式来离线安装. 首先分享 ...

  6. Kubernetes集群YAML文件详解

    Kubernetes集群YAML文件详解 概述 k8s 集群中对资源管理和资源对象编排部署都可以通过声明样式(YAML)文件来解决,也就是可以把需要对资源对象操作编辑到YAML 格式文件中,我们把这种 ...

  7. 【云原生 · Docker】Docker入门、安装配置

    个人名片: 因为云计算成为了监控工程师‍ 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying Docker入门.安装配置 1. Docker入门简介 2. Docker虚拟化特点 3. ...

  8. halcon如何识别硬币?

    halcon如何识别硬币? 前言 最近一直在学习halcon,在此做了一个案例,分享给大家,效果图如下: 1.思路分析 通过观察,发现1元,5角,1角,它们在面值的文字描述不一样,硬币显示的花纹不一样 ...

  9. 链接脚本(Linker Scripts)语法和规则解析(自官方手册)

    为了便于与英文原文对照学习与理解(部分翻译可能不准确),本文中的每个子章节标题和引用使用的都是官方手册英文原称.命令及命令行选项统一使用斜体书写.高频小节会用蓝色字体标出. 3 Linker Scri ...

  10. 把Mybatis Generator生成的代码加上想要的注释

    作者:王建乐 1 前言 在日常开发工作中,我们经常用Mybatis Generator根据表结构生成对应的实体类和Mapper文件.但是Mybatis Generator默认生成的代码中,注释并不是我 ...