golang实现图片上传
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实现图片上传的更多相关文章
- golang学习之beego框架配合easyui实现增删改查及图片上传
golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- TinyMCE的使用(包括汉化及本地图片上传功能)
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
- 包含修改字体,图片上传等功能的文本输入框-Bootstrap
通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
随机推荐
- 官方微信接口(全接口) - 微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI
微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.微信支付.微信红包.微信卡券.微信小店. 微信开发探讨群 330393916 <?php /** * Description o ...
- redis 笔记02 对象、数据库
对象 Redis并没有使用之前介绍的数据结构来实现键值对数据库,而是基于那些数据结构创建了一个对象系统,这个系统包含字符串对象.列表对象.哈希对象.集合对象和有序集合对象这五种类型对象, 每种对象都用 ...
- Sybase:存储过程中采用临时表存储统计数据
Sybase:存储过程中采用临时表存储统计数据 作用 很有效的提升统计查询速度,对于数据量亿级.千万级多表之间关联查询,非常有效: 使用 --无需定义临时表,直接使用 --自动释放临时表 select ...
- ASP.NET MVC Select无限级分类选择下拉框
1:读取父级下的所有子类别 *ViewBag.ParentItemList:不能与ParentId相同 private void ParentDropDownList() { List<SAS. ...
- 安装pycurl
环境:ubuntu 1604 安装 pycurl 遇到一些问题 简单记录 1.安装 pippython2:apt install python-pippython3: apt install pyth ...
- java sleep()和wait()的区别
java sleep()和wait()的区别? sleep()和wait()都能阻塞当前线程. 区别1: sleep()属于Thread类:wait()属于Object类. 区别2: 调用sleep( ...
- LeetCode第[49]题(Java):Group Anagrams
题目:同字符分组 难度:Medium 题目内容: Given an array of strings, group anagrams together. 翻译:给定一组字符串数组,按相同字符组成的字符 ...
- tensorflow笔记:使用tf来实现word2vec
(一) tensorflow笔记:流程,概念和简单代码注释 (二) tensorflow笔记:多层CNN代码分析 (三) tensorflow笔记:多层LSTM代码分析 (四) tensorflow笔 ...
- [javascript]JS如何获取当前时间戳
[javascript]JS如何获取当前时间戳 一.总结 一句话总结:var timestamp = Date.parse(new Date()); 结果是带三位毫秒的,再除个1000取整即可 1.j ...
- 设置 Mysql中的datetime的默认值
如果在navicat下操作,将字段类型设置为timestamp,然后默认值写上CURRENT_TIMESTAMP即可