一、使用表单的方式上传
-
1、新建控制器和路由
package controllers import "github.com/astaxie/beego" type UploadFileController struct { beego.Controller } func (self *UploadFileController) Get() { self.TplName = "file.html" } func (self *UploadFileController) Post() { self.TplName = "success.html" } -
2、前端表单代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/file" method="post" enctype="multipart/form-data"> <input type="file" name="file"><br/> <input type="submit" value="提交"> </form> </body> </html> -
3、在
post请求中处理表单中上传的文件func (self *UploadFileController) Post() { //1.获取上传的文件(file是表单中的name) f, h, err := self.GetFile("file") // 2.延迟关闭 defer func() { f.Close() }() //3.处理上传的错误 if err != nil { return } //4.获取文件名 filename := h.Filename //5.保存上传的文件(file是表单中的name) self.SaveToFile("file", "static/upload/"+filename) self.TplName = "success.html" }
二、使用ajax上传文件
-
1、在
html代码中引入jquery文件，前端使用FormData上传<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.min.js"></script> </head> <body> <input type="file" name="file" id="file"><br/> <input type="button" value="提交" id="btn"> </body> <script> $(function () { $('#btn').on('click', function () { const file = $('#file')[0].files[0]; console.log(file); let formData = new FormData() //第一个file是后端接收的数据,第二个file是要上传的文件,文件内容如下图 formData.append('file', file) $.ajax({ url: '/file', method: 'post', data: formData, contentType: false, processData: false, success: function (response) { console.log(response) } }) }) }) </script> </html>
-
2、关于
ajax提交的几个参数介绍-
contentType=false不使用默认的application/x-www-form-urlencoded这种contentType -
processData默认为true，当设置为true的时候,jquery ajax提交的时候不会序列化data，而是直接使用data
-
-
3、使用了
ajax后端就要返回json数据func (self *UploadFileController) Post() { //1.获取上传的文件 f, h, err := self.GetFile("file") // 2.延迟关闭 defer func() { f.Close() }() //3.处理上传的错误 if err != nil { return } //4.获取文件名 filename := h.Filename //5.保存上传的文件 self.SaveToFile("file", "static/upload/"+filename) //self.TplName = "success.html" self.Data["json"] = map[string]string {"code": "200", "message": "上传成功"} self.ServeJSON() } -
4、根据上传的时间鹾来重命名上传的文件(以免文件名同名的被覆盖)
func (self *UploadFileController) Post() { //1.获取上传的文件 f, h, err := self.GetFile("file") // 2.延迟关闭 defer func() { f.Close() }() //3.处理上传的错误 if err != nil { return } //4.获取文件名 filename := h.Filename // 5.处理上传文件名 time_unix_int := time.Now().Unix() time_unix_str := strconv.FormatInt(time_unix_int, 10) //6.保存上传的文件 self.SaveToFile("file", "static/upload/"+(time_unix_str+"_"+filename)) //self.TplName = "success.html" self.Data["json"] = map[string]string{"code": "200", "message": "上传成功"} self.ServeJSON() }
三、上传到阿里oss云服务器上
-
1、文档地址
-
2、
get方法和之前一样的,就渲染一个页面 -
3、
post方法func (self *OssFileController) Post() { //1.获取上传的文件 f, h, err := self.GetFile("file") if err != nil { return } //2.先关闭文件流 defer f.Close() //3.获取文件的后缀名 extName := path.Ext(h.Filename) //允许上传的文件后缀名 allowExtMap := map[string]bool{ ".jpg": true, ".png": true, ".gif": true, ".jpeg": true, } if _, ok := allowExtMap[extName]; !ok { return } //4.创建阿里oss实例,参考文档 https://help.aliyun.com/document_detail/32145.html?spm=a2c4g.11186623.6.1060.59a84092knAVrU client, err := oss.New("Endpoint", "yourAccessKeyId", "yourAccessKeySecret") if err != nil { fmt.Println("阿里云上传错误", err) return } //5.指定存储空间 bucket, err := client.Bucket("yourBucketName") if err != nil { fmt.Println("存储空间错误") os.Exit(-1) } day := time.Now().Format("2006/01/02") dir := "static/upload/" + day //6.生成文件名 fileUnixName := strconv.FormatInt(time.Now().Unix(), 10) saveDir := path.Join(dir, fileUnixName+extName) fmt.Println(saveDir, "当前文件路径") //7.上传文件流 err = bucket.PutObject(saveDir, f) if err != nil { return } //8.当前的路径 self.Data["json"] = map[string]string{ "code": "200", "message": "成功", "url": "拼接你的url地址" + saveDir, } self.ServeJSON() }
