Js中的File对象

概述

JavaScript 中存在 File 对象，允许网页中的 JavaScript 访问其内容。

File 对象通常是用户在网页中的一个 <input> 元素上传文件返回的 FileList 对象，或者是拖放操作返回的 DataTransfer 对象，也可以在浏览器中的控制台中自己创建。

File 对象中只存在于浏览器环境中，在 Node 环境不存在！！

构造函数

File 的构造函数很简单，使用 new File() 即返回一个新创建的文件对象

属性及方法

File 接口继承了 Blob 接口的属性，相关属性可以查询 MDN 中的官方文档，此处只列出较为常见的属性。

• File.lastModified：返回该 File 对象引用文件最后修改时间，返回毫秒数；
• File.name：返回文件对象名字；
• File.size：返回文件大小。

由Base64转File对象

在日常开发中，Base64 形式的图片很多，JavaScript 允许将图片的 Base64 编码转换为 File 对象，如下：

function dataURLtoFile(dataurl, filename) {
    // 获取到base64编码
    const base64_str = dataurl.split(',');
    // 将base64编码转为字符串
    const decode_str = atob(base64_str[1]);
    let n = decode_str .length;
    // 创建初始化为0的，包含length个元素的无符号整型数组
    const u8arr = new Uint8Array(n) ;
    while (n--) {
        u8arr[n] = decode_str .charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: 'image/png',
    });
}

小结

File 对象在 JavaScript 中的使用及其常见，在前端开发中，我们需要对 Javascript 在 Node 环境和浏览器环境分别使用的区别和共同点进行了解，File 对象就只存在于浏览器环境中。