表单上传图片、视频遇到file还是file.raw的坑？这篇文章给你答案！

前端

2023-09-29 15:25:52

表单上传文件：file 与 file.raw 的抉择

前言

作为前端开发者，我们在处理表单上传时经常会遇到上传图片或视频文件的问题。而此时，一个令人困惑的选择摆在我们面前：究竟是上传 file 对象还是 file.raw 属性？本文将为你揭开谜底，帮助你不再纠结于二者的选择。

file、file.raw、FormData 和 Blob 之间的联系

在了解 file 和 file.raw 的区别之前，我们有必要理清 file、file.raw、FormData 和 Blob 之间的关系：

file： 一个表示文件的文件对象，包含文件大小、类型、名称等信息。
file.raw： file 对象的一个属性，包含文件内容的二进制字符串。
FormData： 用于创建表单数据的对象，可以包含文件和非文件字段。
Blob： 表示二进制大对象的 JavaScript 对象，可以包含文件内容或其他类型的二进制数据。

FormData 上传文件：使用 file 还是 file.raw？

使用 FormData 上传文件时，可以通过 append() 方法添加文件。该方法有两个参数：字段名称和文件对象或 Blob 对象。

图片或视频文件：

对于图片或视频文件，可以使用 file 对象，因为 FormData 会自动将它们转换成 Blob 对象。

其他类型文件：

对于其他类型文件，比如文档或压缩文件，需要手动将文件转换为 Blob 对象。

代码示例

上传图片文件：

const formData = new FormData();
formData.append('image', file);

fetch('upload.php', {
  method: 'POST',
  body: formData
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

上传其他类型文件：

const formData = new FormData();
formData.append('file', new Blob([file], { type: file.type }));

fetch('upload.php', {
  method: 'POST',
  body: formData
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});