Js中的File对象
浅谈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
对象就只存在于浏览器环境中。
更多推荐
已为社区贡献1条内容
所有评论(0)