單人開發移動端專案前後端,對專案中出現的一些問題做記錄。 前端使用vue,預設base64編碼上傳圖片,略過。 後臺使用go-gin框架,主要使用了路由和資料傳輸和繫結的功能
1. 後端宣告一個結構體用於接收前端資料和將資料儲存到資料庫(mongodb)
- 其中ImgList用於接收前端傳來的以base64編碼方式的一組圖片。
2. 定義結構體並使用go-gin提供的c.Bind()與前端json物件完成繫結。
- 此處我的結構體做了巢狀,請無視post。
3. 圖片處理、解碼、儲存
- 首先判斷前端有沒有上傳圖片,有的話就宣告標準解碼物件enc和圖片將儲存的地址path。
- 重點:base64編碼的格式類似這樣"data:image/jpeg;base64, .....",我們需要的是逗號之後的資料,逗號之前指明瞭資料型別。這邊我用了go的切片操作根據img[11]判斷圖片的格式是gif,jpeg,png的哪一種,然後又是一個切片操作img[22:]或者img[23:](jpeg多一個字母)獲取我們想要的資料。
- 拿到正確的圖片資料,定義我們要儲存到檔案伺服器的目錄path並且對圖片進行重新命名,這邊的topStorey.TID是我用bson.NewObjectId()方法生成的唯一id加上遍歷的index確保了圖片名稱的唯一性。
- 圖片基本資訊處理完就可以解碼開啟伺服器目錄儲存圖片(如圖示)。這邊我選用的圖片path是nginx的站點目錄,最後path加上http協議和nginx地址,此時你的nginx如果能被外網訪問,圖片也就能被訪問到。收尾的時候將ImgList內的圖片資料替換為圖片可訪問的地址然後儲存到資料庫。
此方法我後來做了些小更改,匹配圖片型別的時候最好匹配3個字母,topStorey.TID最好轉換下字串用%x快取到path,如果儲存的目錄過深且沒有建立,寫入檔案之前需要遞迴建立一下檔案目錄。 更多資訊請移步我的github