将图像 URL 转换为 File 实例
P粉121447292
P粉121447292 2023-09-04 14:58:36
[JavaScript讨论组]

我有图像数据数组,并尝试将其转换为文件数组

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 })
})

这不起作用:(据我了解,base24 中转换后的图像应该传递给文件构造函数?我该怎么做?

更新: 我有一个 VUE 组件来处理图像。输入组件具有数组类型的属性。如何根据数据库返回的数据创建数组。从数据库返回:图像链接、名称和类型。

UPD2答案:

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" },
]

const data: Promise<File>[] = _photos.map(async function (item): Promise<File> {
  const myBlob: Blob = await getBlobFromUrl(item.url)
  const extensionsFile: RegExpMatchArray | null | undefined = item.url?.match(/\.([^.]+)$/)

  return new File([myBlob], extensionsFile && item.name ? item.name + "." + extensionsFile[1] : "image.jpeg", {
    type: item.mime_type ?? "image/jpeg",
  })
})

Promise.all(data).then((values: File[]): void => {
  PhotosAsFile = values
})

const getBlobFromUrl = (url): Promise<Blob> => {
  return new Promise((resolve, reject): void => {
    const request: XMLHttpRequest = new XMLHttpRequest()
    request.open("GET", url, true)
    request.responseType = "blob"
    request.onload = () => {
      resolve(request.response)
    }
    request.onerror = reject
    request.send()
  })
}

P粉121447292
P粉121447292

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号