HTML地址栏传数据和json区别,前端利用formData格式进行数据上传,前端formData 传值 和 json传值的区别?...
contentType 常见的格式
text/plain :纯文本格式
application/json: JSON数据格式
application/x-www-form-urlencoded 中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格
一. json格式传递
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json' // 需要主动设置,并且将object 用JSON.stringify(data)进行转化
})
})
二. From URL Encoded - url 编码格式 (qs.stringify 格式)
fetch(url, {
method: 'POST', // or 'PUT'
body: qs.stringify(data), // 或者将data转换为formData格式
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 不进行header设置的默认格式
})
})
三 from 非编码格式 - Multipart From (文件流的格式)
由于 涉及文件上传,表单的 提交必须采取非编码格式 即,'content-type':multipart/form-data;boundary=${boundary};
${boundary} 为一分割字符串。但是,重点来了,不管事fetch,还是rxjs的 ajax 只要主动设置 content-type为multipart/form-data,不加后面的boundary,会自动加到传输的格式中,导致后端取不到值。如果加了boundary,又导致直接formData都取不到值。
最终解决方案就是,content-type不进行设置,只将data改为 formData格式。浏览器会自动识别,自动设置为content-type:multipart/form-data;boundary=随机值 的形式。最终上传成功。
export const toFormData = (data: Data) => {
if (data === null) return null;
return Object.keys(data).reduce((formData, item) => {
if (item === 'files') { //特殊判断如果内容为files数组,就让里面值不用走JSON.stringify
data[item] &&
data[item].forEach((curr) => {
formData.append('upload_file[]', curr.originFileObj);
});
} else {
formData.append(item, JSON.stringify(data[item]));
}
return formData;
}, new FormData());
};
总结:
遇到要传JSON值,需要手动设置content-type :application/json;
遇到需要传递From URL Encoded 格式 formData, 需要 手动设置 content-type:application/x-www-form-urlencoded ,并且使用 qs.stringify (data) 将data转换为url格式,才能正常使用
遇到需要文件流 (Multipart From)格式的formData,需要 手动构建formData 数据 ,(new formData,.append('a',1),...), 然后去掉所有的 content-type设置。也就是 不对content-type进行设置。利用formData直接作为 post接口的body值,这样就能正确转化为 'content-type':multipart/form-data;boundary=${boundary} 格式。反正在这种情况下,我实践只能是什么都不传成功了,其他情况都失败了。使用了fetch和 rxjs的ajax,没有使用axios。
HTML地址栏传数据和json区别,前端利用formData格式进行数据上传,前端formData 传值 和 json传值的区别?...相关推荐
- Java发送form-data请求实现文件上传
如何使用Java发送form-data格式的请求上传multipart文件? 封装了以下工具类: package com.leeyaonan.clinkz.common.util;import jav ...
- vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
- 前端不暴露ak/sk直接上传阿里云oss的方案
需求起因 以前写过一篇文章:前端不暴露ak/sk直接上传aws S3的方案 因为项目里还用到的阿里云的oss上传,就研究了阿里云是不是也有避免ak/sk泄露到前端的方案, 这里也复述一下这么做的原因: ...
- 前端实现微信公众号图片上传预览jssdk
最近做了公众号的项目,需要用jssdk,研究了一段时间也走了一些弯路,现在做一些记录 1.首先引入 <script src = "http://res.wx.qq.com/open/j ...
- Retrofit网络请求参数注解,@Path、@Query、@Post、Body等总结(超级实用)以及以Json格式和form-data格式提交数据
我总结的不是很全,这位博主介绍的十分详细:超级实用 https://blog.csdn.net/guohaosir/article/details/78942485 Retrofit 以Json格式提 ...
- 前端js华为云obs断点续传上传
前端js华为云obs断点续传上传 断点续传上传就是将待上传的文件分成若干份分别上传,并实时地将每段上传结果统一记录在断点续传记录对象中,仅当所有分段都上传成功时返回上传成功的结果,否则在回调函数中返回 ...
- dio 上传文件报错_Vue+Element UI实现断点续传、分片上传、秒传
作者:Pseudo 转发链接:https://segmentfault.com/a/1190000023434864 凡是要知其然知其所以然 文件上传相信很多朋友都有遇到过,那或许你也遇到过当上传大文 ...
- php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能
如何在PHP中利用AjaxForm实现一个文件上传功能 发布时间:2020-12-18 14:52:38 来源:亿速云 阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...
- JavaScript————FormData实现多文件上传
引言 星期四的时候,我遇到了一个文件上传的问题,与以往不同的是,这一次上传的是多个文件,而且涉及到了久违的javascript代码. 虽然最后实现的并不尽如人意,不过也算是完成了功能,接下来就把我发现 ...
- 遇到上传的图片太大怎么办?那么来试试压缩上传
人工智能的时代来临了!!!腾讯云的智能识别身份证仅支持1M大小以下的图片那么咱们前端是不是就要将图片压缩再上传了! 我遇到的时候找了好多博客 大部分是后台给压缩,有几个前端压缩的也是代码量挺大的 所以 ...
最新文章
- linux学 java_[操作系统]Linux学习第二步(Java环境安装)
- ubuntu18下安装微信
- 求一份100行左右的C语言程序,求4个C语言程序 每个100行左右 大一水平的
- java8使用stream操作集合类,如何使用bigDicemal计算工资?
- VS2008远程调试简介
- 革新—决定磁带未来的最大挑战
- JDBC02 加载JDBC驱动 建立连接
- 使用 Document!X 为自己的dll生成一个漂亮的说明文档
- NPU-电工电子技术第一章作业讲评
- 服务器无线路由器桥接,三个无线路由器怎么设置桥接
- 打开dbf时自动打开fxp_全新帕萨特打开点火开关后雨刮器会自动工作一次
- android的筛选功能,android实现筛选菜单效果
- 计算机毕业设计Android的手机点名签到学生请假考勤系统(源码+系统+mysql数据库+Lw文档)
- 面板数据、工具变量选择和Hausman检验的若干问题
- PHP基于微信小程序的医院预约挂号系统 uniapp 小程序
- mysql python 2.7.14_python 2.7.14安装包下载|
- js实例之分解质因数
- css相对位置之两个同级div下一个div相对上一个div的位置
- word中自动生成参考文献引用及自动更新文献编号
- python快速下载模块——豆瓣镜像
热门文章
- Leetcode 62.不同路径 (每日一题 20210701)
- 机器学习应用方向(三)~可解释机器学习Explainable ML/Explainable AI
- NTU课程:MAS714(4):贪心
- 李宏毅线性代数笔记1:系统
- pytorch函数整理
- Hadoop学习之MapReduce(一)
- d3 svg path添加文本_10 倍高清不花!大麦端选座 SVG 渲染
- QT中使用QSettings保存应用程序配置信息
- 浅谈“知识蒸馏”技术在机器学习领域的应用
- 图像拐点检测-原理以及代码实现