画像 URL をファイル インスタンスに変換する

Question

画像データの配列があり、それを filearray

に変換しようとしています。

const Images = [
  { img: "http://localhost/images/1.jpg"、名前: "1.png"、mime_type: "image/jpeg" },
  { img: "http://localhost/images/2.jpg"、名前: "2.png"、mime_type: "image/jpeg" },
】
const res: File[] = image.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"、名前: "name1"、mime_type: "image/jpeg" }、
  { URL: "http://localhost:8080/images/2.jpeg"、名前: "name2"、mime_type: "image/jpeg" }、
  { URL: "http://localhost:8080/images/3.jpeg"、名前: "name3"、mime_type: "image/jpeg" }、
】

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

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

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

const getBlobFromUrl = (url): Promise<Blob> => {
  return new Promise((解決、拒否): void => {
    const リクエスト: XMLHttpRequest = new XMLHttpRequest()
    request.open("GET", URL, true)
    request.responseType = "ブロブ"
    request.onload = () => {
      解決(リクエスト.レスポンス)
    }
    request.onerror = 拒否
    request.send()
  })
}

Answer 1

ファイル (なぜそれが必要なのかわかりません) を作成するには、バイナリ データ

を渡す必要があります。

https://developer.mozilla.org/en -US/docs/Web/API/File/File

これはメモリ内のファイルです。ディスクから読み取ることはできません。ディスクに書き込むことはできません。値を設定して FormData として送信できると思います。