广告
返回顶部
首页 > 资讯 > 后端开发 > GO >Golang如何实现图片上传功能
  • 660
分享到

Golang如何实现图片上传功能

2023-06-30 17:06:59 660人浏览 泡泡鱼
摘要

今天小编给大家分享一下golang如何实现图片上传功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1.前端代码html代码

今天小编给大家分享一下golang如何实现图片上传功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

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>

2.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){         ......        }    });}

3.后端代码

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()} func checkFileIsExist(filename string) bool {    var exist = true    if _, err := os.Stat(filename); os.IsNotExist(err) {        exist = false    }    return exist}

以上就是“Golang如何实现图片上传功能”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网GO频道。

您可能感兴趣的文档:

--结束END--

本文标题: Golang如何实现图片上传功能

本文链接: https://www.lsjlt.com/news/330370.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Golang如何实现图片上传功能
    今天小编给大家分享一下Golang如何实现图片上传功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1.前端代码html代码...
    99+
    2023-06-30
  • Golang实现图片上传功能的示例代码
    目录1.前端代码2.JS代码3.后端代码该代码为使用beego实现前后端图片上传。话不多说,直接上代码。 1.前端代码 html代码: <div class="col-5 f...
    99+
    2022-11-13
  • WebUploader如何实现图片上传功能
    本篇内容介绍了“WebUploader如何实现图片上传功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!描述:springmvc 在jsp页...
    99+
    2023-06-14
  • VUE如何实现上传图片功能
    这篇“VUE如何实现上传图片功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“VUE如何实现上传图片功能”文章吧。首先要创建...
    99+
    2023-07-04
  • Django实现上传图片功能
    本文实例为大家分享了Django实现上传图片的具体代码,供大家参考,具体内容如下 1.设置存放上传的图片的文件夹 settings.py MEDIA_ROOT = os.path...
    99+
    2022-11-12
  • Android实现图片上传功能
    最近在开发中,涉及到用户的意见反馈功能这一方面的开发,需要用户输入的文字或者提交的图片,效果大概类似于微信朋友圈那样的图片选择器,一开始自己找了个用universal-imag...
    99+
    2022-06-06
    图片上传 图片 Android
  • WebUploader实现图片上传功能
    本文实例为大家分享了WebUploader实现图片上传的具体代码,供大家参考,具体内容如下 描述:springmvc 在jsp页面实现 WebUploader插件上传图片, 上传到 ...
    99+
    2022-11-11
  • js实现上传图片功能
    前端上传图片的原理是:运用input type=“file”的标签获取图片,再使用FileReader这个对象 new 一个实例,通过这个对象的readAsDataURL()方法读取...
    99+
    2022-11-12
  • Android实现上传图片功能
    本文实例为大家分享了Android实现上传图片功能的具体代码,供大家参考,具体内容如下 设定拍照返回的图片路径 protected void image(String...
    99+
    2022-11-12
  • angular2+nodejs如何实现图片上传功能
    这篇文章主要介绍angular2+nodejs如何实现图片上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在使用angular2进行图片上传的时候,遇到了各种各样的问题。在多番...
    99+
    2022-10-19
  • vue+ bootstrap如何实现图片上传图片展示功能
    这篇文章给大家分享的是有关vue+ bootstrap如何实现图片上传图片展示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图如下所示:html..... ..........
    99+
    2022-10-19
  • android实现图片上传功能(springMvc)
    本文实例为大家分享了Android图片上传的具体代码,供大家参考,具体内容如下 Android端: String fileName = tvFilename.getText(...
    99+
    2022-06-06
    图片上传 图片 Android
  • ionic4+angular7+cordova如何实现上传图片功能
    这篇文章将为大家详细讲解有关ionic4+angular7+cordova如何实现上传图片功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言ionic是一个垮平台开发...
    99+
    2022-10-19
  • PHP如何实现多张图片上传功能
    这篇文章主要介绍“PHP如何实现多张图片上传功能”,在日常操作中,相信很多人在PHP如何实现多张图片上传功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP如何实现多张图片上传功能”的疑惑有所帮助!接下来...
    99+
    2023-07-02
  • html5实现拖拽上传图片功能
    这篇文章主要讲解了“html5实现拖拽上传图片功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5实现拖拽上传图片功能”吧! ...
    99+
    2022-10-19
  • vue实现简单图片上传功能
    本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 就是给自己留个参照,有什么不合理的地方请大家指出来,然后调整 1.效果展示 2.html相关的代码展...
    99+
    2022-11-13
  • PHP怎么实现上传图片功能
    本篇内容主要讲解“PHP怎么实现上传图片功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“PHP怎么实现上传图片功能”吧!首先我们在form表单加上上传附件#file,上传按钮#imgbut,记...
    99+
    2023-06-04
  • vue.js如何实现图片上传预览及图片更换功能
    这篇文章将为大家详细讲解有关vue.js如何实现图片上传预览及图片更换功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:样式以及效果图一并展示1.HTML<...
    99+
    2022-10-19
  • 如何实现Ajax上传图片及上传前先预览功能
    这篇文章将为大家详细讲解有关如何实现Ajax上传图片及上传前先预览功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。上传之前的预览方式一先来说说图片上传之前的预览问题。这...
    99+
    2022-10-19
  • H5如何实现图片压缩与上传功能
    这篇文章主要为大家展示了“H5如何实现图片压缩与上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“H5如何实现图片压缩与上传功能”这篇文章吧。canvas压...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作