如何将图片URL数组转换为File实例数组（Vue场景）

从数据库拿到图片URL、名称和类型数据后，想在Vue组件里转成File实例数组，但直接把URL传给File构造器的写法行不通——因为File构造器需要的是二进制数据，而不是URL字符串，这样生成的File其实只是包含URL文本的文件，不是真正的图片文件。

问题代码示例 #

const images = [
  { img: "http://localhost/images/1.jpg", name: "1.png", mime_type: "image/jpeg" },
  { img: "http://localhost/images/2.jpg", name: "2.png", mime_type: "image/jpeg" },
]
const res: File[] = images.map(function (item) {
  return new File([item.img], item.name, { type: item.mime_type })
})

可行解决方案 #

正确的做法是先通过URL下载图片对应的Blob数据，再用Blob来创建File实例。以下是具体实现：

let PhotosAsFile: File[] = []
const _photos = [
  { url: "http://localhost:8080/images/1.jpeg", name: "name1", mime_type: "image/jpeg" },
  { url: "http://localhost:8080/images/2.jpeg", name: "name2", mime_type: "image/jpeg" },
  { url: "http://localhost:8080/images/3.jpeg", name: "name3", mime_type: "image/jpeg" },
]

// 批量处理图片URL，生成返回File实例的Promise数组
const data: Promise<File>[] = _photos.map(async function (item): Promise<File> {
  // 从URL获取图片的Blob二进制数据
  const myBlob: Blob = await getBlobFromUrl(item.url)
  // 从URL中提取文件扩展名（用于补全文件名）
  const extensionsFile: RegExpMatchArray | null | undefined = item.url?.match(/\.([^.]+)$/)

  // 基于Blob创建File实例，同时处理文件名和类型的默认值
  return new File(
    [myBlob],
    extensionsFile && item.name ? `${item.name}.${extensionsFile[1]}` : "image.jpeg",
    { type: item.mime_type ?? "image/jpeg" }
  )
})

// 等待所有异步操作完成，得到最终的File实例数组
Promise.all(data).then((values: File[]): void => {
  PhotosAsFile = values
})

// 封装从URL获取Blob数据的工具函数
const getBlobFromUrl = (url): Promise<Blob> => {
  return new Promise((resolve, reject): void => {
    const request: XMLHttpRequest = new XMLHttpRequest()
    request.open("GET", url, true)
    request.responseType = "blob" // 指定响应类型为二进制Blob
    request.onload = () => {
      resolve(request.response)
    }
    request.onerror = reject
    request.send()
  })
}

关键逻辑说明 #

• getBlobFromUrl 函数通过XMLHttpRequest请求图片资源，设置responseType为blob，直接获取图片的二进制数据
• 用async/await处理异步请求，每个图片URL对应一个生成File实例的Promise
• 通过Promise.all等待所有图片处理完成，确保拿到完整的File实例数组
• 可选逻辑：从URL提取扩展名补全文件名，同时处理类型和名称的默认值，提升代码鲁棒性

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