前端基础一:用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文件上传:

javascript 复制代码
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数据对象,那么在解析的时候就很好解析了,接收的是文件流,那么也是按文件流进行处理,服务端与客户端都省事了。

相关推荐
你的人类朋友1 小时前
什么是API签名?
前端·后端·安全
会豪3 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子3 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶3 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子3 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_3 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit4 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言