在浏览器中操作文件，多数情况下用到的是 File 对象，从<input type='file' />元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.

File 对象继承自 Blob 对象，先看看 Blob 对象。

1. Blob 对象

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

Blob构造函数 Blob(array[, options])

• array 是一个由ArrayBuffer, ArrayBufferView, Blob, string 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。string会被编码为UTF-8。
• options 是一个可选的对象，它可能会指定如下两个属性：
  • type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。
  • endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： “native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者
    “transparent”，代表会保持blob中保存的结束符不变。

示例:

methods: {
    files() {
      var content1 = ["This is my firt trip to an island"];
      var blob1 = new Blob(content1, { type: "text/plain" });
      var content2 = { name: "Alice", age: 23 };
      var blob2 = new Blob([JSON.stringify(content2, null, 2)], {
        type: "application/json"
      });
      console.log(blob1, 1); // Blob {size: 33, type: "text/plain"}size: 33type: "text/plain"__proto__: Blob 1
      console.log(blob2, 2); // Blob {size: 34, type: "application/json"} 2
    }
  }

属性名称

Blob实例属性

属性名称	读/写	描述
size	只读	Blob 对象中所包含数据的大小（字节）。
type	只读	一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如 “image/png”.

2. File 对象

File构造函数

我们接触的多数关于 File 的操作都是读取，js也为我们提供了手动创建 File 对象的构造函数：File(bits, name[, options])。

• bits (required) ArrayBuffer，ArrayBufferView，Blob，或者 Array[string] —
  或者任何这些对象的组合。这是 UTF-8 编码的文件内容。。
• name [String] (required) 文件名称，或者文件路径.
• options [Object] (optional) 选项对象，包含文件的可选属性。可用的选项如下：
  • type: string, 表示将要放到文件中的内容的MIME类型。默认值为 ‘’ 。
  • lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

示例：

var file1 = new File(['text1', 'text2'], 'test.txt', {type: 'text/plain'});

根据已有的 blob 对象创建 File 对象:

var file2 = new File([blob], 'test.png', {type: 'image/png'});

File实例属性

File 对象的实例内容不可见，但是有以下属性可以访问:

属性名称	读/写	描述
name	只读	返回文件的名称.由于安全原因,返回的值并不包含文件路径 。
type	只读	返回 File 对象所表示文件的媒体类型（MIME）。例如 PNG 图像是 “image/png”.
lastModified	只读	number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。
lastModifiedDate	只读	Date, 返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代。
size	只读	File 对象中所包含数据的大小（字节）。

示例：

template

<input type="file" ref="file" value="file" @change="chang" />

methods

chang () {
   	  console.log(this.$refs.file.files[0]);
   }
/**
	File {name: "MinerInfo.vue - android - Visual Studio Code 2020_11_24 10_49_12.png", lastModified: 1606186152444, lastModifiedDate: Tue Nov 24 2020 10:49:12 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 137573, …}
	lastModified: 1606186152444
	lastModifiedDate: Tue Nov 24 2020 10:49:12 GMT+0800 (中国标准时间) {}
	name: "MinerInfo.vue - android - Visual Studio Code 2020_11_24 10_49_12.png"
	size: 137573
	type: "image/png"
	webkitRelativePath: ""
	__proto__: File
*/

更多…