js new file 参数

在JavaScript中，new File() 是一个构造函数，用于创建一个新的 File 对象。这个对象表示用户计算机上的一个文件，并且可以用于文件上传等操作。File 对象是 Blob 对象的子类，因此它继承了 Blob 的所有属性和方法。

基础概念

new File() 构造函数接受两个参数：

parts：这是一个数组，包含了要组成文件的各个部分。这些部分可以是字符串、Blob 对象或其他 File 对象。
options：这是一个可选的对象，用于指定文件的元数据，如文件名、MIME 类型和最后修改日期。

示例代码

// 创建一个包含文本内容的File对象
const fileContent = "Hello, world!";
const fileName = "hello.txt";
const fileType = "text/plain";

const file = new File([fileContent], fileName, { type: fileType });

console.log(file);

优势

灵活性：可以创建包含多种数据类型的文件。
兼容性：File 对象在现代浏览器中广泛支持。
便捷性：可以直接用于文件上传 API，如 FormData。

类型

File 对象的类型由其 MIME 类型决定，这可以在创建时通过 options 参数指定。

应用场景

文件上传：用户可以选择文件并通过表单提交。
拖放上传：用户可以将文件拖放到网页上进行上传。
生成文件下载：网页可以动态生成文件并提供下载链接。

可能遇到的问题及解决方法

问题：创建的文件大小不正确

原因：可能是由于传递给 new File() 的 parts 数组中的某个元素大小不正确。

解决方法：确保所有 parts 的大小加起来等于期望的文件大小。

const part1 = new Blob(["Hello, "]);
const part2 = new Blob(["world!"]);
const file = new File([part1, part2], "hello.txt", { type: "text/plain" });

问题：文件名包含非法字符

原因：文件名可能包含不允许的字符，如 / 或 \。

解决方法：在设置文件名之前，对其进行清理，移除或替换非法字符。

function sanitizeFileName(fileName) {
  return fileName.replace(/[/\\?%*:|"<>]/g, "_");
}

const safeFileName = sanitizeFileName("my/file:name.txt");
const file = new File(["content"], safeFileName, { type: "text/plain" });