前言
在工作中,经常会遇到上传文件到服务器的需求,本篇文章结合工作实际情况,在vue与goLang的前后分离架构中实现文件上传存储。
前端:vue+vuetify
后端:go+gin
一、Gin框架
Gin 是一个 go 写的 web 框架,具有高性能的优点。
官方文档地址:github_Gin
详细文档地址:godoc_GIn
- 服务针对不同的路由,有不同的验证规则。比如服务对应PC管理端和移动端,分别有不同的验证规则,涉及路由组、中间件拦截验证;
- 请求记录、操作日志按照时间每天记录到文件中。涉及中间件日志操作;
- 跨域问题,涉及中间件跨域;
- API的使用,涉及常用的POST,PUT,GET,DELETE。
二、代码示例
1.前端
1.1 api配置
export const uploadFile = formData => {
return request({
method: 'post',
url: '/api/setting/file',
data: formData
})
}
1.2 vue
<v-file-input
v-model="fileInfo"
required
@change="uploadFile"
label="File input"
prepend-icon="">
</v-file-input>
1.3 js
//引入方法
import { uploadFile } from '@/api/setting'
//方法使用
async uploadFile () {
if (this.fileInfo !== null) {
const formData = new FormData()
formData.append('file', this.fileInfo)
try {
const { data } = await uploadFile(formData)
this.$toast.success('上传成功')
} catch (error) {
this.$toast.danger('上传失败')
}
}
}
2.后端
2.1 router配置
router.POST("file", v1.UploadFile)
2.2 实现上传
func UploadFile(c *gin.Context) {
file, err := c.FormFile("file")
if err != nil {
c.String(http.StatusInternalServerError, "读取失败: "+err.Error())
return
}
var uploadir string
//定义文件保存地址
uploadir = "../files/"
_, err = os.Stat(uploadir)
if os.IsNotExist(err) {
os.Mkdir(uploadir, os.ModePerm)
}
//fileName 脱敏
fileId := strconv.FormatInt(time.Now().Unix(), 10) + strconv.Itoa(rand.Intn(999999-100000)+10000)
newFileName := fileId + path.Ext(file.Filename)
dst := uploadir + newFileName
uplouderr := c.SaveUploadedFile(file, dst)
if uplouderr != nil {
fmt.Println(uplouderr)
rsp := response.FailWithCodeAndData(response.ERROR, uplouderr.Error())
c.JSON(response.ERROR, rsp)
return
}
rsp := response.Success()
rsp.Msg = "success"
rsp.Code = 200
rsp.Data = gin.H{"filePath": dst, "fileName": file.Filename, "fileId": fileId}
c.JSON(http.StatusOK, rsp)
}
3. 上传保存效果
文件名称不以上传名称显示,在数据库中文件名称绑定文件ID存储。
总结
上传的方式有很多种,包括静态,动态,单文件,多文件,但是原理大致相同,这个小demo作为工作中遇到的问题进行整理,互相学习。