1.定一个目标,有目标就有了动力,还有了方向:
目标:创建相册网站 准备工作: 1.第一个小目标:得有上传图片的功能. 2.环境已经搭建好了,直接开搞 用到的技术:go,vue 直接上代码:
页面:后台: 打开页面<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>图片上传</title> <script src="/static/js/vue.min.js"></script> <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script> </head> <body> <div id="app"> <div v-html="message"></div> <form id="uploadForm" action="uploadimg" enctype="multipart/form-data"><!----> <input type="file" name="image" id="file_upload" multiple><!--multiple 批量上传--> <img :src="imgshow"> <button id="upload" type="button" v-on:click="uploadimg">上传</button> </form> </div> <script> new Vue({ el: '#app', data: { imgshow: "static/img/img_7.jpg", message: '<h1>测试图片上传</h1>' }, methods: { uploadimg: function (event) { var self = this; var imgdata = new FormData($('#uploadForm')[0]); alert("123"); $.ajax({ url: '/test2', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, // 关键点 contentType: false, // 关键点 success: function (res) { self.imgshow = res; }, error: function (e) { alert("错误"); } }) } } }) </script> </body> </html>func (c *Test2Controller) Get() { //c.Ctx.WriteString("loading...") //data := getData("123") //mapb, _ := json.Marshal(data) //c.Ctx.WriteString(string(mapb)) c.Data["Website"] = "beego.me" c.Data["Email"] = "astaxie@gmail.com" c.TplName = "index.tpl" }上传图片:经测试,支持手机上传.func (c *Test2Controller) Post() { files, _ := c.GetFiles("image") //获取上传的文件 for _, file := range files { path := "./static/img/" + file.Filename p, err := os.OpenFile(path, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0666) if err != nil { fmt.Printf("文件打开失败") } fileStream, err := file.Open() defer p.Close() io.Copy(p, fileStream) if (err != nil) { fmt.Printf(file.Filename + "成功!") } } c.Redirect("/test2", 302) }未完待续...