如何在JavaScript/Angular中将[object object]转换为File类型？

你遇到的[object Object]本质是存储的文件元数据对象（通常包含文件名、文件类型、文件地址等属性），并非原生File实例，按以下步骤可完成转换：

前置校验 #

先确认元数据对象至少包含以下核心字段：

• 文件名（name）
• 文件MIME类型（type，可选，没有的话可以默认填充通用二进制类型）
• 文件内容来源：要么是已拿到的Blob/ArrayBuffer格式的文件内容，要么是可访问的文件远程地址

转换实现 #

场景1：已持有文件内容Blob/ArrayBuffer #

直接调用原生File构造函数生成实例即可：

// yourMetaDataObj 对应你显示为[object Object]的对象
// fileContentBlob 是已获取到的文件内容Blob/ArrayBuffer
const targetFile = new File([fileContentBlob], yourMetaDataObj.name, {
  type: yourMetaDataObj.type || 'application/octet-stream',
  lastModified: yourMetaDataObj.lastModified || Date.now()
});

场景2：仅持有文件远程访问地址，未缓存内容 #

先请求文件内容转成Blob，再生成File实例：

async function convertMetaToFile(metaObj) {
  // 请求文件内容
  const response = await fetch(metaObj.url);
  const contentBlob = await response.blob();
  // 生成File实例
  return new File([contentBlob], metaObj.name, {
    type: metaObj.type || contentBlob.type,
    lastModified: metaObj.lastModified || Date.now()
  });
}

// 调用示例
const targetFile = await convertMetaToFile(yourMetaDataObj);

结果校验 #

执行console.log(targetFile instanceof File)，返回true即转换成功，和新增文件的File类型完全一致，可直接用于后续上传、预览等业务逻辑。

兼容说明 #

如果需要兼容IE11，原生不支持File构造函数，可直接使用生成的Blob对象代替，绝大多数文件上传接口对Blob和File实例的识别逻辑是通用的。

内容的提问来源于stack exchange，提问作者Chandrashekhar Singh