Convertir l'URL de l'image en instance de fichier

Question

J'ai un tableau de données d'image et j'essaie de le convertir en un filearray

const images = [
  { img : "http://localhost/images/1.jpg", nom : "1.png", mime_type : "image/jpeg" },
  { img : "http://localhost/images/2.jpg", nom : "2.png", mime_type : "image/jpeg" },
]
const res : Fichier[] = images.map(fonction (élément) {
  renvoyer un nouveau fichier ([item.img], item.name, { type: item.mime_type })
})</pré>
<p>Cela ne fonctionne pas :(Si je comprends bien, l'image convertie en base24 doit être transmise au constructeur de fichier ? Comment faire ? </p>
<p>Mise à jour :
J'ai un composant VUE qui gère les images. Le composant d'entrée a une propriété de type tableau. Comment créer un tableau basé sur les données renvoyées par la base de données. Retours de la base de données : lien d’image, nom et type. </p>
<p>Réponse UPD2 : </p>
<pre class="brush:php;toolbar:false;">let PhotosAsFile : File[] = []
const_photos = [
  { url : "http://localhost:8080/images/1.jpeg", nom : "name1", mime_type : "image/jpeg" },
  { url : "http://localhost:8080/images/2.jpeg", nom : "name2", mime_type : "image/jpeg" },
  { url : "http://localhost:8080/images/3.jpeg", nom : "name3", mime_type : "image/jpeg" },
]

const data : Promise<File>[] = _photos.map(fonction asynchrone (élément) : Promise<File> {
  const monBlob : Blob = attendre getBlobFromUrl (item.url)
  const extensionsFile : RegExpMatchArray | null | non défini = item.url?.match(/.([^.]+)$/)

  renvoie un nouveau fichier ([myBlob], extensionsFile && item.name ? item.name + "." + extensionsFile[1] : "image.jpeg", {
    tapez : item.mime_type ?? "image/jpeg",
  })
})

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

const getBlobFromUrl = (url) : Promesse<Blob>
  retourner une nouvelle promesse ((résoudre, rejeter): void => {
    requête const : XMLHttpRequest = new XMLHttpRequest()
    request.open("GET", url, true)
    request.responseType = "blob"
    request.onload = () =>
      résoudre (requête. réponse)
    }
    request.onerror = rejeter
    demande envoyée()
  })
}

Answer 1

Pour créer 文件 (je ne sais pas pourquoi vous en avez besoin), vous devez transmettre des données binaires

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

Ceci est un fichier en mémoire. Vous ne pouvez pas le lire à partir du disque. Vous ne pouvez pas l'écrire sur le disque. Je suppose que vous pouvez lui attribuer une valeur et l'envoyer sous forme de FormData.