前端基础一:用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.mzph.cn/news/105045.shtml

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

相关文章

OpenCV实现人脸关键点检测

目录 实现过程 1&#xff0c;代码解读 1.1 导入工具包 1.2导入所需图像&#xff0c;以及训练好的人脸预测模型 1.3 将 dlib 的关键点对象转换为 NumPy 数组&#xff0c;以便后续处理 1.4图像上可视化面部关键点 1.5# 读取输入数据&#xff0c;预处理 1.6进行人脸检测 1…

解决Win10电脑无线网卡的移动热点无法开启问题

一、目的 利用无线网卡连接网络&#xff0c;然后又用无线网卡通过移动热点分享该网络。 移动热点&#xff0c;简单地说&#xff0c;就是将台式机或笔记本的 Internet 连接转化成 WIFI 信号以供移动设备无线上网的功能&#xff0c;硬件前提是电脑须安装有无线网卡。 二、问题 …

torch.hub.load报错urllib.error.HTTPError: HTTP Error 403: rate limit exceeded

在运行DINOv2的示例代码时&#xff0c;需要载入预训练的模型&#xff0c;比如&#xff1a; backbone_model torch.hub.load(repo_or_dir"facebookresearch/dinov2", modelbackbone_name) torch.hub.load报错“urllib.error.HTTPError: HTTP Error 403: rate limit…

重拾技术写作,勿忘初心

说说这一年的学习经历 关于我 我来自湖南省的一所专科院校&#xff0c;非科班&#xff1b;当前已经是大二了。后年就要专升本了&#xff0c;不由的感叹&#xff0c;这时间为什么会这么快&#xff1f; 其实我早在大一上下学期就学完了以下知识点&#xff1a;C语言 、基础数据结…

Linux- 自定义一个ARP请求

自定义一个ARP请求或响应&#xff0c;并使用AF_PACKET套接字发送&#xff0c;需要手动创建整个以太网帧。 下面是一个简单的C代码示例&#xff0c;用于发送一个ARP请求&#xff0c;查询给定IP地址的MAC地址&#xff1a; #include <stdio.h> #include <stdlib.h> …

530. 二叉搜索树的最小绝对差

给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 题解&#xff1a;使用中序遍历来实现 代码如下&#xff1a; public int getMinimumDifference(TreeNode root) {int pre …

利用Python提取将Excel/PDF文件数据

使用Python来创建一个接口&#xff0c;用于接收Excel文件资源链接&#xff0c;下载文件并执行指定的操作&#xff0c;然后返回处理后的数据。以下是一个基本的示例&#xff0c;展示如何使用Flask来创建这样的接口。请注意&#xff0c;这是一个简化的示例&#xff0c;您可能需要…

JVM第三讲:JVM 基础-字节码的增强技术详解

JVM 基础-字节码的增强技术详解 本文是JVM第三讲&#xff0c;JVM 基础-字节码的增强技术。在上文中&#xff0c;着重介绍了字节码的结构&#xff0c;这为我们了解字节码增强技术的实现打下了基础。字节码增强技术就是一类对现有字节码进行修改或者动态生成全新字节码文件的技术…

人大金仓分析型数据库COPY装载数据

目录 文件装载 STDIN装载 \copy装载数据 输入格式 错误隔离 优化性能 COPY FROM将文件或标准输入中的数据复制到表中&#xff0c;并将数据附加到表内容中。 COPY是非并行的&#xff1a;使用master实例在单个进程中加载数据。建议仅对非常小的数据文件使用COPY。主机上的后…

Stable Diffusion 动画animatediff-cli-prompt-travel

基于 sd-webui-animatediff 生成动画或者动态图的基础功能,animatediff-cli-prompt-travel突破了部分限制,能让视频生成的时间更长,并且能加入controlnet和提示词信息控制每个片段,并不像之前 sd-webui-animatediff 的一套关键词控制全部画面。 动图太大传不上来,凑合看每…

python 并发请求,转发

python 并发请求&#xff0c;转发 http://t.csdnimg.cn/snSm5 另外&#xff1a;如果想要随机入参&#xff0c;可以参考加入随机数 #codingutf-8 import requests import json import threading import time import uuid import random class postrequests(): def init(self):…

css 块元素、行内元素、行内块元素相互转换

在HTML和CSS中&#xff0c;元素可以分为三类&#xff1a;块级元素&#xff08;Block-level Elements&#xff09;、内联元素&#xff08;Inline Elements&#xff09;和内联块级元素&#xff08;Inline-block Elements&#xff09;。 块级元素&#xff08;Block-level Elements…

10月14日,每日信息差

今天是2023年10月14日&#xff0c;以下是为您准备的8条信息差 第一、中国石油摘得日本碳信用实货交易首单。据了解&#xff0c;日本交易所集团旗下的东京证券交易所11日宣布&#xff0c;交易二氧化碳排放量的“碳信用市场”正式开始运营 第二、前三季度全国铁路投产新线1402公…

【C++】哈希对unordered_map和unodered_set的封装

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a; C学习 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对我最大…

Paddle build_cinn_pass_test源码阅读(fluid目录下)

代码位置在 paddle\fluid\framework\paddle2cinn\build_cinn_pass_test.cc &#xff0c;因为paddle CINN和PIR部分依旧在高频更新&#xff0c;所以各位看到的可能和我的不一样 inline bool CheckNodeExisted(const std::unordered_set<Node*>& nodes,const std::str…

Godot 单元测试

前言 单元测试是我们常用的功能&#xff0c;Godot作为一个游戏&#xff0c;单元测试和热重载是我们常用的功能。这里我们讲解最简单的单元测试的情况。 Godot 配置 我们添加一个最简单的节点&#xff0c;挂载一个最简单的脚本。 添加测试方法&#xff08;只能是静态方法&…

【Python】Python语言基础(中)

第十章 Python的数据类型 基本数据类型 数字 整数 整数就是整数 浮点数 在编程中&#xff0c;小数都称之为浮点数 浮点数的精度问题 print(0.1 0.2) --------------- 0.30000000000000004 ​​1.可以通过round()函数来控制小数点后位数 round(a b)&#xff0c;则表示…

Linux该如何学习,给你支招

如果你已经确定对 Linux 产生了兴趣&#xff0c;那么接下来我们介绍一下学习 Linux 的方法。这只是自己关于学习Linux的建议。 一、如何去学习 学习大多类似庖丁解牛&#xff0c;对事物的认识一般都是由浅入深、由表及里的过程&#xff0c;循序才能渐进。学习 Linux 同样要有一…

关于RNNoise、webrtc_ns、三角带通滤波器、对数能量

语音特征参数MFCC提取过程详解 其中讲解了&#xff1a;三角带通滤波器 、计算每个滤波器组输出的对数能量、对数能量、经离散余弦变换&#xff08;DCT&#xff09;得到MFCC系数 推荐阅读某乎这位大佬的全部文章&#xff1a; 下面是几篇出自这位大佬的很好的文章&#xff1a; …

SSH 基础学习使用

什么是SSH 1.SSH SSH&#xff08;Secure Shell&#xff09; 是较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性的协议&#xff0c;利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。 实际应用中&#xff0c;主要用于保证远程登录和远程通信的安全&#…