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

news2024/11/27 2:39:22

最近有人问:你是否能用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.coloradmin.cn/o/1092601.html

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

相关文章

企业级CI/CD 持续集成/交付/发布

jenkins 安装与使用 nmcli g hostname jenkins 加载缓存 yum makecache fast 上传jdk11、jdk8 获取、上传war包 1、jenkins.io/download 2.4.27 2、老师发的 上传 maven 上传tomcat软件包 &#xff08;apache.org-tomcat8-下载&#xff09; 注意8009端口 /usr... vi /etc/pro…

「蓝桥·算法双周赛」第一场公开赛

三带一【算法赛】 - 蓝桥云课 (lanqiao.cn) 给定四个字符&#xff0c;判断是否其中有三个相同&#xff0c;另一个与他们不同 #include <bits/stdc.h> void solve() {std::string s;std::cin>>s;char as[0],bs[1],cs[2],ds[3];if(ab&&ac&&a!d) std:…

Puppeteer监听网络请求、爬取网页图片(二)

Puppeteer监听网络请求、爬取网页图片&#xff08;二&#xff09; Puppeteer监听网络请求、爬取网页图片&#xff08;二&#xff09;一、爬取需求二、实现讲解三、效果查看 一、爬取需求 首先打开浏览器&#xff0c;打开指定网站监听网站发出的所有请求&#xff0c;记录请求&a…

【数据结构】线性表与顺序表

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 线性表与顺序表 1. 线性表2. 顺序表2.1 …

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

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

Spring MVC 十一:@EnableWebMvc

我们从两个角度研究EnableWebMvc&#xff1a; EnableWebMvc的使用EnableWebMvc的底层原理 EnableWebMvc的使用 EnableWebMvc需要和java配置类结合起来才能生效&#xff0c;其实Spring有好多Enablexxxx的注解&#xff0c;其生效方式都一样&#xff0c;通过和Configuration结合…

Hermes - 指尖上的智慧:自定义问答系统的崭新世界

在希腊神话中&#xff0c;有一位智慧与消息的传递者神祇&#xff0c;他就是赫尔墨斯&#xff08;Hermes&#xff09;。赫尔墨斯是奥林匹斯众神中的一员&#xff0c;传说他是乌尔阿努斯&#xff08;Uranus&#xff09;和莫伊拉&#xff08;Maia&#xff09;的儿子&#xff0c;同…

【Java 进阶篇】JavaScript Math对象详解

在JavaScript编程中&#xff0c;Math对象是一个非常有用的工具&#xff0c;用于执行各种数学运算。它提供了许多数学函数和常数&#xff0c;可以用于处理数字、执行几何运算、生成随机数等。在本篇博客中&#xff0c;我们将深入探讨JavaScript中Math对象的各种功能和用法。 什…

城市广告牌安全传感器特点有哪些?

城市广告牌安全传感器特点有哪些&#xff1f; 在现代快节奏的都市生活中&#xff0c;城市的广告牌成为不可或缺的一部分&#xff0c;以各种形式和大小存在于城市的街头巷尾&#xff0c;商业中心和交通要道。广告牌是城市生命线组成的一部分。但是由于天气因素、材料老化、不当维…

C++智能指针(三)——unique_ptr初探

与共享指针shared_ptr用于共享对象的目的不同&#xff0c;unique_ptr是用于独享对象。 文章目录 1. unqiue_ptr的目的2. 使用 unique_ptr2.1 初始化 unique_ptr2.2 访问数据2.3 作为类的成员2.4 处理数组 3. 转移所有权3.1 简单语法3.2 函数间转移所有权3.2.1 转移至函数体内3.…

VS Code:CMake配置

概述 在VSCode和编译器MinGW安装完毕后&#xff0c;要更高效率的进行C/C开发&#xff0c;采用CMake。CMake是一个开源、跨平台的编译、测试和打包工具&#xff0c;它使用比较简单的语言描述编译&#xff0c;安装的过程&#xff0c;输出Makefile或者project文件&#xff0c;再去…

【JavaEE】 饿汉模式与懒汉模式详解与实现

文章目录 &#x1f334;单例模式&#x1f340;饿汉模式&#x1f38d;懒汉模式&#x1f6a9;单线程版(线程不安全&#xff09;&#x1f6a9;多线程版&#x1f6a9;多线程版(改进) ⭕总结 &#x1f334;单例模式 单例模式是校招中最常考的设计模式之一. 那么啥是设计模式呢? 设…

五子棋(C语言实现)

目录 构思 1、主程序 2、初始化 3、游戏菜单 4、打印棋盘 6、玩家下棋 7、判断输赢 8、功能整合 人机下棋 完整版&#xff1a; game.h game.c text.c 测试功能代码 构思 五子棋不必多介绍了&#xff0c;大家小时候都玩过哈。 我们要通过程序实现这个小游戏&…

AI对网络安全的影响与挑战

近年来&#xff0c;随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;网络安全领域也开始逐渐引入生成式AI应用。根据最新的数据研究&#xff0c;生成式AI对网络安全和合规的影响最大&#xff0c;同时也包括了IT和云的运维、硬件和软件支持领域。通过AI和自动…

Typora--博客必备神器

文章目录 一、下载typora二、创建文件前的操作1.显示扩展名2.typora设置和markdown语法2.1markdown语法2.2图片的管理2.3**高亮**2.4设置自动保存和调试 一、下载typora 进入typota.io网站&#xff0c;点击下载即可。 二、创建文件前的操作 1.显示扩展名 设置显示文件扩展名…

python+django学生选课管理系统_wxjjv

1&#xff09;前台&#xff1a;首页、课程信息、校园论坛、校园公告、个人中心、后台管理。 &#xff08;2&#xff09;管理员&#xff1a;首页、个人中心、学生管理、教师管理课、程信息管理、课程分类管理、选课信息管理、作业信息管理、提交作业管理、学生成绩管理、校园论…

android studio 移植工程

第一步&#xff1a; 第二步&#xff1a;创建 第三步&#xff1a; 第四步&#xff1a;复制文件至替代新工程中的文件 第五步&#xff1a;修改 第六步&#xff1a;编译OK

第 125 场周赛 三元组

可恶&#xff0c;被longlong的长度卡住了&#xff0c;要是longlong再大一点就好了&#xff08;bushi&#xff09;&#xff0c;其实是算法有问题&#xff0c;里面涉及1e9*1e9*1e9,longlong肯定存不下&#xff0c;一会儿去改改&#xff0c;先记录一下。 题目&#xff1a;竞赛 - …

树莓派玩转openwrt软路由:12.OpenWrt安装MySQL

1、安装MySQL #下载MySQL镜像 docker pull arm64v8/mysql:latest#运行MySQL镜像 docker run --name mysql --restartalways --privilegedtrue \ -v /usr/local/mysql/data:/var/lib/mysql \ -v /usr/local/mysql/conf.d:/etc/mysql/conf.d \ -e MYSQL_ROOT_PASSWORD123456 -p …

C++——C++入门

C 前言一、认识C二、C入门C关键字(C98)命名空间命名空间定义命名空间使用 C输入&输出缺省参数缺省参数概念缺省参数分类 函数重载函数重载概念C支持函数重载的原理--名字修饰(name Mangling) 总结 前言 C的学习开始啦&#xff01; 来吧~让我们拥抱更广阔的知识海洋&#x…