golang实现图片上传

该代码为使用beego实现前后端图片上传。话不多说,直接上代码。

1.前端代码

html代码:

 <div class="col-5 f-l text text-r">背景图(必须):</div>
<div class="img-box">
<label>
<span class="copy-btn Hui-iconfont"></span>
<input type="file" class="up-file">
</label>
</div>
<div class="img-file col-offset-5">
</div>

JS代码:

a.读取图片代码,用于在页面上显示。

//读取图片
function loadImg(){
//获取文件
var file = $(".up-file")[0].files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload=function(e) {
var e=window.event||e;
imgFile = e.target.result;
console.log(imgFile);
$(".img-file").css({'background':"url("+imgFile+")"});
isimg();
}; //正式读取文件
reader.readAsDataURL(file); }

  b.验证是否有图片存在

//是否有图片验证
function isimg(){
var img= $(".img-file").css('background-image'); if(img.indexOf("data:image")==-1&&img.indexOf(".jpg")==-1){
$(".mess").html("请添加背景图片").css("opacity",1);
return false;
}
else{
$(".mess").css("opacity",0).html("");
return true;
}
}

  c.提交上传,将图片以base64编码的方式传给后端

function addData(){
var url=$(".img-file").css("background-image");
var data1=[{"name":"url","value":url}];
$.ajax({
url:"/commmethod/method/uploadimg",
data:data1,
type:"post",
ContentType:"application/json",
success:function(resp){
......
}
});
}

  

2.后端代码

func (this *CommMethodController) UploadImg() {
fileurl := this.GetString("url")
DataArr := strings.Split(fileurl, ",")
//去除包装,获取到base64编码
imgBase64 := DataArr[1][:len(DataArr[1])-2]
//base64转码
imgs, err := base64.StdEncoding.DecodeString(imgBase64)
if err != nil {
beego.Error("base64 decode error:", err)
}
timenow := time.Now().Unix()
file, err := os.OpenFile("./static/img/"+strconv.FormatInt(timenow, 10)+".jpg", os.O_CREATE|os.O_WRONLY, 0644)
if err != nil {
beego.Debug("create file error:", err)
}
w := bufio.NewWriter(file) //创建新的 Writer 对象
_, err3 := w.WriteString(string(imgs))
if err3 != nil {
beego.Error("write error:", err3)
}
w.Flush()
defer file.Close()
imgname := strconv.FormatInt(timenow, 10) + ".jpg"
t := struct {
ImageName string `json:"imagename"`
}{imgname}
this.Data["json"] = t
this.ServeJSON()
} /**
*此代码主要用于编辑图片时,删除原有图片
* 判断文件是否存在 存在返回 true 不存在返回false
*/
func checkFileIsExist(filename string) bool {
var exist = true
if _, err := os.Stat(filename); os.IsNotExist(err) {
exist = false
}
return exist
}

  

golang实现图片上传的更多相关文章

  1. golang学习之beego框架配合easyui实现增删改查及图片上传

    golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...

  2. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  3. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  5. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  6. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  7. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  8. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  9. 包含修改字体,图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

随机推荐

  1. LeetCode:二叉树的后序遍历【145】

    LeetCode:二叉树的后序遍历[145] 题目描述 给定一个二叉树,返回它的 后序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [3,2,1] 进阶: 递归算法很 ...

  2. webservice -- cxf客户端调用axis2服务端

    背景: 有个项目, 需要由第三方提供用户信息, 实现用户同步操作, 对方给提供webservice接口(axis2实现)并也使用axis2作主客户端调用我方提供的webservice接口 起初, 由于 ...

  3. iOS程序的启动过程介绍

    大家在学习iPhone开发时候,都会写HelloWorld程序.大家一般都是通过向导,生成项目,然后通过模拟器启动应用程序.但是大家知道其背后的启动过程吗?也就是当点击程序图标启动程序开始到退出程序整 ...

  4. 【持续更新】ultraedit工具使用总结

    常用设置及快捷键 设置Ultraedit自动换行: 永久修改: 点击菜单栏的“高级→配置”,找到“编辑器→自动换行/制表符设置”,选择“默认为每个文件启用自动换行”,ok. 临时修改: 快捷键 Ctr ...

  5. Flume1.7.0的安装与使用

    Flume下载后,解压,新增一个配置文件,写入配置即可 我将配置文件写在 conf 下,取名为 flume-conf-spooldir.properties Flume 运行命令: bin/flume ...

  6. jQuery多级联动美化版Select下拉框

    在线演示 本地下载

  7. ==与equals的各种情况

    == 能用于基本类型之间.基本类型与引用类型之间及相同引用类型之间,不能用于不同引用类型之间 对于基本类型,取值来对比,对于引用类型,取地址来对比 int a= 1; Integer b= 1; Sy ...

  8. filter方法解析

    filter一般用于将数组中的某些元素过滤掉,并生成一个新的数组 基本语法如下: var newArray= arrayObj.filter(functionObj); newArray 根据过滤条件 ...

  9. Book Review of "The Practice of Programming" (Ⅰ)

    The Practice of Programming In the preface, the author illustrates four basic principles of programm ...

  10. bzoj 2748: [HAOI2012]音量调节

    2748: [HAOI2012]音量调节 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 872  Solved: 577[Submit][Status] ...