upload分片上传知识点

发布时间:2024年01月11日

1 XMLHttpRequest.upload

XMLHttpRequest.upload 属性返回一个 XMLHttpRequestUpload对象,用来表示上传的进度。这个对象是不透明的,但是作为一个XMLHttpRequestEventTarget,可以通过对其绑定事件来追踪它的进度。

事件 相应属性的信息类型
onloadstart 获取开始
onprogress 数据传输进行中
onabort 获取操作终止
onerror 获取失败
onload 获取成功
ontimeout 获取操作在用户规定的时间内未完成
onloadend 获取完成(不论成功与否)

2 formData

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。

  • 如果送出时的编码类型被设为 multipart/form-data,它会使用和表单一样的格式。

  • 如果你想构建一个简单的GET请求,并且通过<form>的形式带有查询参数,可以将它直接传递给URLSearchParams。

  • 实现了 FormData 接口的对象可以直接在for...of结构中使用,而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

2.1 使用

new FormData()

2.2 方法

方法名 描述
FormData.append() 向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
FormData.delete() 从 FormData 对象里面删除一个键值对。
FormData.entries() 返回一个包含所有键值对的iterator对象。
FormData.get() 返回在 FormData 对象中与给定键关联的第一个值。
FormData.getAll() 返回一个包含 FormData 对象中与给定键关联的所有值的数组。
FormData.has() 返回一个布尔值表明 FormData 对象是否包含某些键。
FormData.keys() 返回一个包含所有键的iterator对象。
FormData.set() 给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
FormData.values() 返回一个包含所有值的iterator对象。

2.3 为什么只用formData(multipart/form-data)进行上传大文件

application/x-www-form-urlencoded 是把数据使用 url编码 后传送给后端,不适合用于传输大型二进制数据或者包含非ASCII字符的数据,
application/json 得到的只是一个描述性JSON对象,根本就不是一个文件对象。
如果说一定得需要用 json 来传递的话,那么就必须得把这个原生的 file 对象进行转码,例如:base64,然后后端在接收的时候按照 json 来解析,获取那一段字符串之后重新转码生成图像文件,过程确实繁琐了。


 

3 File对象

File 对象提供有关文件的信息,并允许网页中的 JavaScript 读写文件。

File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

3.1 属性

属性 是否只读
文章来源:https://blog.csdn.net/qq_37860634/article/details/135537319
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。