如何使用JavaScript将文件夹内JPG/PNG图片转换为File类型

首先明确一个浏览器安全前提：普通浏览器环境下JavaScript没有权限直接访问本地任意路径的文件，必须由用户主动通过文件选择框、拖拽操作授权后，才能拿到文件句柄，不存在绕过用户交互直接读取本地文件夹内容的方法。
你提到的<input type="file">选中文件后，返回的本身就是标准File类型实例，不需要额外转换，以下是不同场景下的具体实现方法：

场景1：通过文件选择器获取本地JPG/PNG的File对象 #

这是最常用的合规实现方式，在你写的input基础上绑定事件即可直接拿到File对象：

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

const fileInput = document.getElementById('avatar')
fileInput.addEventListener('change', (e) => {
  // 拿到用户选中的文件列表，列表内每一项都是File实例
  const fileList = Array.from(e.target.files)
  // 二次校验文件类型，避免accept属性被手动绕过
  const validImgFiles = fileList.filter(file => {
    return ['image/png', 'image/jpeg'].includes(file.type)
  })
  // validImgFiles内就是符合格式要求的File对象，可直接用于上传、本地预览等操作
  console.log(validImgFiles)
})

如果需要支持选择整个文件夹内的JPG/PNG，给input加上webkitdirectory属性即可，选中后会递归返回文件夹内所有符合accept规则的文件：

<input type="file" id="folderSelect" webkitdirectory accept="image/png, image/jpeg">

场景2：已有图片Blob/二进制数据，转为File类型 #

File本质是特殊的Blob对象，只是额外增加了文件名、最后修改时间等元信息，如果你已经拿到了图片的Blob实例（比如Canvas导出、接口返回的二进制图片、拖拽拿到的文件片段），直接调用File构造函数即可生成：

/**
 * 将图片Blob转为File对象
 * @param {Blob} blob 图片Blob实例
 * @param {string} fileName 生成的文件名
 * @param {string} mimeType 文件MIME类型，支持image/png、image/jpeg
 * @returns {File}
 */
function blobToImgFile(blob, fileName, mimeType) {
  return new File([blob], fileName, {
    type: mimeType,
    lastModified: Date.now()
  })
}

// 用法示例：将Canvas绘制的内容导出为PNG格式的File
const canvas = document.querySelector('canvas')
canvas.toBlob((blob) => {
  const avatarFile = blobToImgFile(blob, 'user-avatar.png', 'image/png')
  console.log(avatarFile) // 标准File实例
}, 'image/png', 0.92)

场景3：图片Base64字符串转为File类型 #

如果手里是图片的Base64编码，先解码为二进制数据再生成File即可：

/**
 * 图片Base64转File对象
 * @param {string} base64 图片Base64字符串
 * @param {string} fileName 生成的文件名
 * @returns {File}
 */
function base64ToImgFile(base64, fileName) {
  const [meta, data] = base64.split(',')
  const mimeType = meta.match(/:(.*?);/)[1]
  const binaryStr = atob(data)
  const length = binaryStr.length
  const uint8Array = new Uint8Array(length)
  for (let i = 0; i < length; i++) {
    uint8Array[i] = binaryStr.charCodeAt(i)
  }
  return new File([uint8Array], fileName, {
    type: mimeType,
    lastModified: Date.now()
  })
}

特殊环境说明 #

如果是Electron、Tauri等带本地系统权限的桌面端环境，可以直接调用系统API读取本地文件的二进制内容，再按上面的Blob转File的方法生成对应实例即可，普通网页环境不具备这个权限。

内容的提问来源于stack exchange，提问作者Ravi Shankar