画像 URL をファイル インスタンスに変換する
P粉121447292
P粉121447292 2023-09-04 14:58:36
0
1
614
<p>画像データの配列があり、それを <code>file</code>array</p> に変換しようとしています。 <pre class="brush:php;toolbar:false;">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 }) })</pre> <p>これは機能しません:(私が理解しているように、base24 で変換されたイメージはファイル コンストラクターに渡される必要があります。どうすればよいですか?</p> <p>更新: 画像を処理する VUE コンポーネントがあります。入力コンポーネントには配列型のプロパティがあります。データベースから返されたデータに基づいて配列を作成する方法。データベースからの戻り値: 画像リンク、名前、タイプ。 </p> <p>UPD2 の答え: </p> <pre class="brush:php;toolbar:false;">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() }) }</pre></p>
P粉121447292
P粉121447292

全員に返信(1)
P粉680087550

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

を渡す必要があります。

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート