概述

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 对象就只存在于浏览器环境中。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐