使用js将blob对象转file对象

最新推荐文章于 2025-06-27 09:02:12 发布

原创最新推荐文章于 2025-06-27 09:02:12 发布 · 4.8w 阅读

CC 4.0 BY-SA版权

文章标签：

33 篇文章

订阅专栏

本文介绍如何在前端实现图片裁剪，并将裁剪后的Blob对象转换为File对象，以便通过后端统一的文件上传接口进行上传。文章详细解释了使用File构造函数进行转换的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做图片裁剪上传的需求时，后端使用统一的文件上传接口，要求前端做图片裁剪。

前端裁剪上传图片组件开发会单独一篇文章总结，写完后会在此处链接过去。

前端裁剪图片后获取的实际是blob对象，后端统一的文件上传接口实际接收的file对象，前端需要在数据提交前将blob对象转为file对象。转换方法如下：

const files = new window.File(
    [blob],
    this.files[0].name,
    { type: this.files[0].type }
);

File() 构造器创建新的 File 对象实例。

var myFile = new File(bits, name[, options]);

bits
- ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
name
- 文件名称，或者文件路径
options 可选
- 选项对象，包含文件的可选属性。可用的选项如下：
  - type: DOMString，表示将要放到文件中的内容的 MIME 类型。默认值为 “” 。
  - lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。