目录

第一章 前言

第二章 理解文件上传的对象

2.1 如何利用原生实现

2.2 认识理解文件上传的四个对象

2.2.1 file对象

2.2.2 blob对象

2.2.3  formData对象

2.2.4 fileReader对象 

2.2.4.1 了解fileReader对象基本属性

2.2.4.2 了解 fileReader对象基本方法

2.2.4.3  了解fileReader对象基本事件

第三章 理解四个对象的使用

3.1 file与blob对象的使用

3.1.1 file对象转blob对象

3.1.2 blob对象转file对象

3.2 formData的使用

第四章 实战应用

4.1 单文件上传

4.2 多文件上传

4.3 切片上传

4.3.1 如何处理多个图片

4.3.2 实现切片上传 

第五章 源码

第一章 前言

相信我们很多人在项目中都会实现图片上传这么个功能，并且也会使用FormData和elementUI、antd等框架的upload组件实现，但是一延伸到原理、细节时就很难受，说不出所以然(小编也体验过，哈哈哈哈)，所以如下是小编最近总结的点。

• 用到的前端页面

         多选提交     {{ item.name }}     处理图片信息

第二章 理解文件上传的对象

2.1 如何利用原生实现

• 利用input原生标签，type为file形式，multiple为多选，accept可以限制上传的文件类型，@change是使用的方法

HTML input 标签 | 菜鸟教程

• 我们可以看到最终返回的数据类型是File对象 

一个或多个文件对象组成的数组

2.2 认识理解文件上传的四个对象

2.2.1 file对象

• 通过指定input标签type属性为file来读取files对象，是一个由一个或多个文件对象组成的数组

2.2.2 blob对象

• 表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据， 使用构造函数创建。

2.2.3  formData对象

• 利用它来提交表单、模拟表单提交，最大的优势就是可以上传二进制文件。
• 熟悉formData：

 前后端传参：掌握FormData并解决form-data类型传参问题_前端formdata传参-CSDN博客

2.2.4 fileReader对象 

• 构造函数方式实例化一个fileReader对象，readAs()方法将文件对象读取成base64格式或者文本格式

2.2.4.1 了解fileReader对象基本属性

• 直接使用时：

const reader = new FileReader() console.log('FileReader方法及属性：', reader)

• 查看方法及属性：

• FileReader.error（只读属性）：读取文件时报的错误，null表示在读取用户所上传文件时没有出错
• FileReader.readyState（只读属性）：加载状态

• FileReader.result（只读属性）：表示文件的内容，仅在读取操作完成之后才有效，数据的格式取决于使用哪个方法（在2.2.4.2中）来启动读取操作

const reader = new FileReader() console.log('FileReader方法及属性：', reader) console.log('尝试使用只读属性error：', reader.error) console.log('尝试使用只读属性readyState：', reader.readyState) console.log('尝试使用只读属性result：', reader.result)

2.2.4.2 了解 fileReader对象基本方法

•  我们顺着原型链往下找可以发现，该对象下还有以下四种方法

• 理解 FileReader.abort()的使用

dealFile () {   this.fileList.forEach(item => {     const reader = new FileReader()     reader.abort()     console.log('走到这了1')     reader.onload = (res) => {       console.log('走到这了2')     }   }) },

由于 FileReader.abort() 终止了读取操作，所以不会执行onload执行完毕触发的函数中的代码

• 理解 FileReader.readAsArrayBuffer()的使用

dealFile () {   this.fileList.forEach(item => {     const reader = new FileReader()     reader.readAsArrayBuffer(item)     reader.onload = (res) => {       console.log('执行readAsArrayBuffer返回的数据', res)       console.log('返回的result值为：', res.target.result)     }   }) },

• 理解 FileReader.readAsBinaryString() 的使用

dealFile () {   this.fileList.forEach(item => {     const reader = new FileReader()     reader.readAsBinaryString(item)     reader.onload = (res) => {       console.log('执行readAsBinaryString返回的数据', res)       console.log('返回的result值为：', res.target.result)     }   }) },

注意：该信息是原始的二进制文件信息 

•  理解 FileReader.readAsDataURL() 的使用

dealFile () {   this.fileList.forEach(item => {     const reader = new FileReader()     reader.readAsDataURL(item)     reader.onload = (res) => {       console.log('执行readAsDataURL返回的数据', res)       console.log('返回的result值为：', res.target.result)     }   }) },

• 理解 FileReader.readAsText() 的使用

dealFile () {   this.fileList.forEach(item => {     const reader = new FileReader()     reader.readAsText(item)     reader.onload = (res) => {       console.log('执行readAsText返回的数据', res)       console.log('返回的result值为：', res.target.result)     }   }) },

 注意：小编这里识别的是txt文档中的文字，如果上传的是图片，会说乱码

2.2.4.3  了解fileReader对象基本事件

• 查看回调事件

•  使用方法：

dealFile () {   this.fileList.forEach(item => {     const reader = new FileReader()     reader.onabort = (res) => {       console.log('读取中断了onabort', res)     }     reader.onerror = (res) => {       console.log('读取发生错误了onerror', res)     }     reader.onload = (res) => {       console.log('读取完成了onload', res)     }     reader.onloadstart = (res) => {       console.log('读取开始了onloadstart', res)     }     reader.onloadend = (res) => {       console.log('读取结束了onloadend', res)     }     reader.onprogress = (res) => {       console.log('读取进行中onprogress', res)     }   }) },

•  输出结果

• 由上可知执行顺序为

 1、onloadstart -> onprogress -> onload  -> onloadend 

2、当使用 reader.abort() 方法中断读取时会执行onabort 

3、当读取错误时会执行onerror

第三章 理解四个对象的使用

3.1 file与blob对象的使用

3.1.1 file对象转blob对象

fileToBlob (file) {    // new Blob([文件二进制流], 文件类型)    const blob = new Blob([file], { type: file.type }) // 直接利用Blob的方法    console.log('blob', blob)    return blob },

3.1.2 blob对象转file对象

// blob二进制流转file二进制流注意要再携带参数文件名 blobToFile (blob, fileName) {   // new File([blob二进制流], 文件名, 文件类型)   const file = new File([blob], fileName, { type: blob.type })   console.log('file', file) },

3.2 formData的使用

前后端传参：掌握FormData并解决form-data类型传参问题_前端formdata传参-CSDN博客

第四章 实战应用

4.1 单文件上传

• 利用input元素的accept属性限制上传文件的类型，multiple限制能否多选
•  完整代码：

        -- html部分——

         -- js部分——

 页面效果——

上传多个文件：

将每一个promise对象push到一个数组中 ：

查看处理后的数据信息：

利用file-saver插件中的方法下载的内容： 

成功利用jszip插件中的方法将上传的图片打压成压缩包： 

4.3.2 实现切片上传 

•  切片上传的核心就是利用二进制流中的size(文件大小)的slice方法，切割数据流，将每一段二进制流数据发送请求给后端，当发送完成后，由后端合并，最终返回前端想要的数据

 html部分——

js部分—— (先点击压缩图片按钮，再点击分片提交)

注意：一定要与后端沟通好传参的格式

 后端合并结果：（这里只是demo，具体情况具体解析）

第五章 源码

batch_file_upload: 文件上传（单个、多个、分片）代码

参数说明：

• 单个/多个上传

• 分片上传