簡體   English   中英

在表單中使用base64作為文件上傳

[英]Using base64 in form to upload as file

我有這個簡單的上傳表單來瀏覽和上傳圖像。

<form action="https://storage.googleapis.com/YOUR_BUCKET_NAME" 
      method="post" enctype="multipart/form-data">
  <input name="key" type="text" value="objectName.txt" /><br/>
  <input name="file" type="file" /><br/>
  <input type="submit" value="Upload!" />
</form>

但是我正在使用圖像裁剪器,該圖像裁剪器輸出base64字符串,並希望上傳該字符串。

現在,瀏覽器不允許我將輸入文件的值設置為字符串,它需要一個文件。

現在我替換了:

<input name="file" type="file" />

附:

<input type="hidden" name="file" />

並在其他地方處理瀏覽/挑選圖像。

現在,該文件確實以某種方式上傳了文件,但是圖像無效,它只是一個文本文件,其中包含base64字符串。 將類型更改為file將導致上傳失敗。

因此,我猜測這與必須將base64轉換為可讀文件有關。

搜索將base64轉換為文件后,我嘗試了:

blobData = atob(imageData)

但是它會出錯: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. ,如果我將字符串( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etc到地址欄中,則會正確顯示。 嘗試此操作時相同: http : //wiki.lenux.org/base64-string-to-blob-object/我有很多不同的方法來轉換它,但是我不斷在atob上收到錯誤消息,指出它的編碼不正確。

我覺得必須有一個簡單的解決方案,因為瀏覽器已經知道如何解碼字符串。

我發現: http ://www.nixtu.info/2013/06/how-to-upload-canvas-data-to-server.html僅輸出圖像的大小和類型,但不進行轉換。 並將其直接設置為值將產生一個字符串:'[object Blob]`

深入探討: 將Blob同步轉換為二進制字符串,這會將blob轉換為Uint8Array ,我想我已經很接近了,但是我現在迷路了。

明確地說,我正在尋找一種客戶端解決方案,並且不想使用canvas或任何其他額外的輔助元素。

您正在嘗試轉換URI方案而不是數據。 您將必須獲取URI的編碼數據才能對其進行解碼。

數據URI語法

讓我們再次看一下這個img標簽及其稍微令人不安的語法:

  <img src =“ data:image / png; base64,iVBOR ...” /> 

你有:

  • data -方案名稱
  • image/png內容類型
  • base64用於編碼數據的編碼類型
  • iVBOR...編碼數據
  • 一些和; 和:撒好

http://www.phpied.com/data-urls-what-are-they-and-how-to-use/

最簡單的方法是分割逗號。

var image ="data:image/png;base64,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"
var decoded = atob(image.split(",")[1])

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM