單人開發移動端項目先後端,對項目中出現的一些問題作記錄。 前端使用vue,默認base64編碼上傳圖片,略過。 後臺使用go-gin框架,主要使用了路由和數據傳輸和綁定的功能前端
1. 後端聲明一個結構體用於接收前端數據和將數據保存到數據庫(mongodb)
- 其中ImgList用於接收前端傳來的以base64編碼方式的一組圖片。
2. 定義結構體並使用go-gin提供的c.Bind()與前端json對象完成綁定。
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,若是保存的目錄過深且沒有建立,寫入文件以前須要遞歸建立一下文件目錄。 更多信息請移步個人githubvue