单人开发移动端项目先后端,对项目中出现的一些问题作记录。 前端使用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