发表于： 2019-10-16 23:41:40

1 764

今天完成的事：

完成了图片进度条，操作

明天计划的事：

继续任务6-10

遇到的问题：

上传图片是出现问题报错，经师兄提醒是上传参数格式有问题，需要把file文件对象转换成formData对象

FileReader方法实现

1.先创建一个FileReader（）实例

2.获取input节点的files，会返回一个数组对象，获取单个用event.target.files[0]操作就行，要获取多个需要计算数组的长度，用 forEach() 方法调用数组的元素。

3.把需要的文件js对象放入readAsDataURL括号中，它可以把Blob对象或File对象转换成data URL格式，可以把它设为图像的src属性。

4.把第四步转换后的结果放入要展示的图片节点

收获：

文件和二进制数据的操作

Blob对象

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。

生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。

（1）Blob构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。

（2）Blob对象的slice方法，将二进制数据按照字节分块，返回一个新的Blob对象。

（3）Blob对象有两个只读属性：

size：二进制数据的大小，单位为字节。
type：二进制数据的MIME类型，全部为小写，如果类型未知，则该值为空字符串。

File API提供File对象，它是FileList对象的成员，包含了文件的一些元信息，比如文件名、上次改动时间、文件大小和文件类型。

File对象的属性值如下。

name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为Date对象实例。
FileReader API
FileReader API用于读取文件，即把文件内容读入内存。它的参数是File对象或Blob对象。
对于不同类型的文件，FileReader提供不同的方法读取文件。
readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。
readAsText方法用于读取文本文件，它的第一个参数是File或Blob对象，第二个参数是前一个参数的编码方法，如果省略就默认为UTF-8编码。该方法是异步方法，一般监听onload件，用来确定文件是否加载结束，方法是判断FileReader实例的result属性是否有值。其他三种读取方法，用法与readAsText方法类似。
FileReader对象采用异步方式读取文件，可以为一系列事件指定回调函数。
onabort方法：读取中断或调用reader.abort()方法时触发。
onerror方法：读取出错时触发。
onload方法：读取成功后触发。
onloadend方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart方法：读取将要开始时触发。
onprogress方法：读取过程中周期性触发
URL对象
URL对象用于生成指向File对象或Blob对象的URL。
URL对象：用于对二进制数据生成URL。