zoukankan      html  css  js  c++  java
  • 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">&#xe679;</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
    }
    

      

  • 相关阅读:
    Nova中的系统状态分析
    nova Flavors
    NovaException: Unexpected vif_type=binding_failed
    nova Reboot (重启)
    nova Rescue 和 Unrescue
    nova shelve
    nova Evacuate
    ceilometer alarm 创建过程中的DB操作及优化
    Ceilometer 数据库比较
    network namespace连接的4种方法及性能
  • 原文地址:https://www.cnblogs.com/dfsxh/p/10248215.html
Copyright © 2011-2022 走看看