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

相关推荐
533_28 分钟前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6451 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
莫的感情1 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥1 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python2 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_2 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐2 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊2 小时前
C语言bsearch的使用
java·c语言·前端
云枫晖2 小时前
Webapck系列-初识Webpack
前端·javascript
慧一居士2 小时前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端