iT邦幫忙

1

html圖片上傳 base64問題

請益各位前輩
目前小弟初學html
想做一個圖片上傳的前端
透過按下「選擇圖片」按鈕
將圖片converted to base64
然後存入一個input欄位
然後以表單方式post base64讓後端接收後再存入資料庫
實測結果有些圖片可以成功顯示在input欄位
但有些圖片則無法顯示
請問問題可能出在哪呢?

目前嘗試程式碼如圖

淺水員 iT邦大師 6 級 ‧ 2021-03-14 22:20:40 檢舉
id="base64" 的DOM元素是什麼?我並沒有看到傳送到後端的程式碼,所以「有些圖片可以成功顯示在input欄位」是指傳送前就先顯示嗎?
maxmas iT邦新手 4 級 ‧ 2021-03-15 08:47:10 檢舉
比較可能是檔案類型不同,JPG,PNG... 檔案標頭不同

另外不建議圖檔以資料庫的方式儲存,資料庫大小會膨脹的很快,到時你就知道....
說不定是你的資料表存圖片的欄位開太小 導致圖片 base64 存的不完整
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
LiaoG
iT邦新手 5 級 ‧ 2021-03-15 14:55:46

試試看在onload之前加一段reader.readAsDataURL(theFile)?

0
淺水員
iT邦大師 6 級 ‧ 2021-03-17 12:30:09

其實這裡問題比較大的是

  1. 樓主後端到底存了什麼
  2. 後端讀取完資料庫後,送給前端的資料又是什麼

使用方式有幾種

  1. 使用 data uri(我猜原發問是要這個)。
  2. 後端把 base64 轉存成圖片,之後直接使用 img src 讀取圖片的連結。

偏門方式:
假設真的要直接拿 base64 呈現圖片
也許可以透過 blob+ObjectURL 的方式丟給 img

我要發表回答

立即登入回答