goLang 中 gin框架实现文件上传(vue + go)


前言

在工作中,经常会遇到上传文件到服务器的需求,本篇文章结合工作实际情况,在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作为工作中遇到的问题进行整理,互相学习。

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值