前端基础一:用Formdata对象来上传图片的原因

最近有人问:你是否能用json来传图片,其实应该这么理解就对了。

一、上传的数据体格式Content-Type

  •         1.application/x-www-form-urlencoded 
  •         2.application/json
  •         3.multipart/form-data

        以上三种类型旨在告诉服务器需要接收的数据类型同事要采用何种类型的解析方式。

二、理解常见的三种Content-Type

application/x-www-form-urlencoded :会在url上拼接字符串,如:k=123&c=12241,同时对于中文还会转码。
application/json:直接会在请求体中 添加object对象 如: { a: 123, b: 456 }
multipart/form-data: 在network中可以看到添加带数据类型等各类标识的文件类型字符串请求体 告诉服务器端接收对象是一个文件数据流


三、如果采用JSON来传递file会发生什么

        模拟一次input文件上传:

input type="file" id="file" multiple onchange="change(this)"/> <script>var json = {}function change(t,event){console.log(t.files)console.log(t.value)json.file = t.files[0]console.log(json);}</script>

得到的只是一个描述性JSON对象,根本就不是一个文件对象。
如果说一定得需要用json来传递的话,那么就必须得把这个原生的file对象进行转码,例如:base64,然后后端在接收的时候按照json来解析,获取那一段字符串之后重新转码生成图像文件,过程确实繁琐了。 

四、采用FormData

         采用formdata的话会把本次所有的form表单统一作为一个类型去发送,例如form action enctype采用FormData数据对象,那么在解析的时候就很好解析了,接收的是文件流,那么也是按文件流进行处理,服务端与客户端都省事了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/158545.html

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

相关文章

论文阅读:Image-to-Lidar Self-Supervised Distillation for Autonomous Driving Data

目录 摘要 Motivation 整体架构流程 技术细节 雷达和图像数据的同步 小结 论文地址: [2203.16258] Image-to-Lidar Self-Supervised Distillation for Autonomous Driving Data (arxiv.org) 论文代码&#xff1a;GitHub - valeoai/SLidR: Official PyTorch implementati…

C++ 反向迭代器

反向迭代器的即正向迭代器的--&#xff0c;反向迭代器的--即正向迭代器的&#xff0c;反向迭代器和正向迭代器的很多功能都是相似的&#xff0c;因此我们可以复用正向迭代器作为反向迭代器的底层容器来封装&#xff0c;从而实现出反向迭代器&#xff0c;即&#xff1a;反向迭代…

python文本转语音

概述 目前有文本转语音的技术&#xff0c;可以用在配音领域&#xff0c;我个人因为一些需求&#xff0c;所以开始寻找这方面的资源&#xff0c;目前各大平台&#xff0c;比如腾讯&#xff0c;讯飞&#xff0c;阿里&#xff0c;百度等都有这样的API服务&#xff0c;我个人是是使…

linux shell环境下处理yml文件

需要安装工具yq sudo pip install yq 这里我使用pip3指定源安装 sudo pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple yq 1. 读取文件内容&#xff1a; 我使用的版本是yq 3.2.3,以下命令执行会报错&#xff1a; yq r chainmaker.yml .blockchain yq r chain…

2023-10-14 LeetCode每日一题(只出现一次的数字)

2023-10-14每日一题 一、题目编号 136. 只出现一次的数字二、题目链接 点击跳转到题目位置 三、题目描述 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时…

RootSIFT---SIFT图像特征的扩展

RootSIFT是论文 Three things everyone should know to improve object retrieval - 2012所提出的 A Comparative Analysis of RootSIFT and SIFT Methods for Drowsy Features Extraction - 2020 当比较直方图时&#xff0c;使用欧氏距离通常比卡方距离或Hellinger核时的性能…

zabbix监控——自定义监控内容

目录 自定义监控项步骤 案例 1、明确需要执行的命令 2、创建 zabbix 的监控项配置文件&#xff0c;用于自定义 key&#xff0c;并重启zabbix-agent2 3、.在服务端验证新建的监控项 4、在 Web 页面创建自定义监控项模板 1&#xff09;创建模板 2&#xff09;创建监控项 …

振弦传感器和无线振弦采集仪在隧道安全监测的解决方案

振弦传感器和无线振弦采集仪在隧道安全监测的解决方案 隧道作为交通工程的重要组成部分&#xff0c;具有极高的安全风险&#xff0c;因此隧道安全监测是必不可少的。振弦传感器和无线振弦采集仪作为隧道安全监测的两种重要设备&#xff0c;能够有效地监测隧道的振动情况&#…

Rancher 使用指南

Rancher 使用指南 Rancher 是什么?Rancher 与 OpenShift / Kubesphere 主要区别对比RancherOpenShiftKubesphere 对比 Rancher 和 OpenShift Rancher 安装 Rancher 是什么? 企业级Kubernetes管理平台 Rancher 是供采用容器的团队使用的完整软件堆栈。它解决了管理多个Kuber…

PIL Image格式转Tensor

Image格式是由PIL库读入的图片格式 from PIL import Image torch.Tensor是用于深度学习计算的张量格式 import torch 1 Image格式转Tensor 先转numpy 再转tensor torch.from_numpy() np.asarray() image torch.from_numpy(np.asarray(image)) 但是报错: max_pool2d” not im…

智能网关IOT 2050采集应用

SIMATIC IOT2050 是西门子公司新推出的应用于企业数字化转型的智能边缘计算和云连接网关。 它将云、公司内 IT 和生产连接在一起&#xff0c;专为直接在生产环境中获取、处理和传输数据的工业 IT 解 决方案而设计。例如&#xff0c;它可用于将生产 过程与基于云的机器和生产数据…

AC修炼计划(AtCoder Regular Contest 166)

传送门&#xff1a;AtCoder Regular Contest 166 - AtCoder 一直修炼cf&#xff0c;觉得遇到了瓶颈了&#xff0c;所以想在atcode上寻求一些突破&#xff0c;今天本来想尝试vp AtCoder Regular Contest 166&#xff0c;但结局本不是很好&#xff0c;被卡了半天&#xff0c;止步…

Vue条件渲染

一、使用v-show条件渲染 语法格式&#xff1a; v-show"表达式" // true 或 false 当表达式的值为true的时候就显示&#xff0c;表达式值为false的时候隐藏。 下面是使用v-show实现的一个点击按钮切换显示和隐藏的小案例 &#xff1a; 值得注意的是&#xff0c;使…

Element Plus阻止 el-dropdown、el-switch等冒泡事件

最近做vue3项目&#xff0c;使用Element Plus,又遇到坑了&#xff01; 问题点&#xff1a;组件中遇到事件冒泡问题了&#xff0c;el-checkbox 中 change事件要求阻止冒泡&#xff0c;如下代码中要求点击checkbox时不调用li标签的show方法 <li click"show()">…

kafka属性说明

kafka中关于一些字段说明 groupId :标识消费者分组id&#xff0c;如果多个消费者id相同&#xff0c;就表示这几个消费者是一组&#xff0c;当一组多个消费者消费同一个topic时&#xff0c;一组中只会有一个成功消费 代码如下 这时只会有一条消息被消费

Net6 用imagesharp 实现跨平台图片处理并存入oss

项目要求&#xff1a;生成电子证书 一、模板文件在OSS中&#xff0c;直接加载 二、向模板文件添加二维码 三、向模板文件添加多行文字 四、生成二维码&#xff0c;存入本地&#xff0c; 五、向模板文件添加二维码 代码实现步骤 一、建立.net 6 API项目&#xff0c;安装N…

城市消防无人机控制系统的设计

目录 摘 要......................................................................................................................... 2 第一章 绪论.............................................................................................................…

【Java 进阶篇】JavaScript 正则表达式(RegExp)详解

JavaScript 正则表达式&#xff0c;通常简写为 RegExp&#xff0c;是一种强大的文本匹配工具&#xff0c;它允许你通过一种灵活的语法来查找和替换字符串中的文本。正则表达式在编程中用途广泛&#xff0c;不仅限于 JavaScript&#xff0c;在许多编程语言中也都有类似的实现。 …

Vue 绑定style和class

在应用界面中&#xff0c;某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。 如果需要动态绑定 class 或 style 样式&#xff0c;可以使用 v-bind 绑定。 绑定 class 样式【字符串写法】 适用于&#xff1a;类名不确定&#xff0c;需要动态指…

ETL数据转换方式有哪些

ETL数据转换方式有哪些 ETL&#xff08;Extract&#xff0c; Transform&#xff0c; Load&#xff09;是一种常用的数据处理方式&#xff0c;用于从源系统中提取数据&#xff0c;进行转换&#xff0c;并加载到目标系统中。 数据清洗&#xff08;Data Cleaning&#xff09;&am…