html圖片上傳 base64問題 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1

html圖片上傳 base64問題

html5 html upload handlefileselect base64

jason879797 2021-03-14 16:00:45 ‧ 3062 瀏覽

分享至

請益各位前輩
目前小弟初學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... 檔案標頭不同

另外不建議圖檔以資料庫的方式儲存，資料庫大小會膨脹的很快，到時你就知道....

耿直小伙 iT邦新手 1 級 ‧ 2021-03-15 14:55:10 檢舉

說不定是你的資料表存圖片的欄位開太小導致圖片 base64 存的不完整

登入發表討論

直播研討會

{{ item.subject }}

{{ 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

其實這裡問題比較大的是

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

使用方式有幾種

使用 data uri（我猜原發問是要這個）。
後端把 base64 轉存成圖片，之後直接使用 img src 讀取圖片的連結。

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

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22202 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙