首頁  >  文章  >  web前端  >  如何將物件 URL 轉換為文件或 Blob 以進行表單提交?

如何將物件 URL 轉換為文件或 Blob 以進行表單提交?

Patricia Arquette
Patricia Arquette原創
2024-10-30 04:31:28486瀏覽

How to Convert an Object URL to a File or Blob for Form Submissions?

從物件URL 擷取檔案或Blob

在Web 應用程式中處理影像時,通常使用拖放- drop 或其他方法允許用戶上傳文件。要顯示這些圖像,通常會使用 URL.createObjectURL 將它們轉換為物件 URL。然而,當涉及到將這些圖像作為表單的一部分提交時,問題就出現了:如何將這些物件 URL 轉換回 File 或 Blob 並將它們附加到 FormData 物件?

現代解決方案

現代瀏覽器提供了一個簡單而高效的解決方案:

<code class="javascript">let blob = await fetch(url).then(r => r.blob());</code>

此程式碼可用於從物件URL和常規URL 中取得檔案或Blob。 URL 參數可以是先前建立的物件 URL。

取得 Blob 後,您可以輕鬆地將其附加到 FormData 物件並提交表單。這是一個範例:

<code class="javascript">// Assume you have the Blob from the object URL
const formData = new FormData();
formData.append('image', blob);

// Submit the form via AJAX or another mechanism
fetch('/upload', {
  method: 'POST',
  body: formData
});</code>

以上是如何將物件 URL 轉換為文件或 Blob 以進行表單提交?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn