您现在的位置是：首页 > Golang>日常简单笔记>golang ajax 上传文件,golang实现图片上传 网站首页 日常简单笔记

## golang实现图片上传

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

#### 1.前端代码

html代码：

~~~

背景图(必须):



~~~

JS代码：

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

~~~javascript

//读取图片

function loadImg(){

//获取文件

var file = $(".up-file")[0].files[0];

//创建读取文件的对象

var reader = new FileReader();

//创建文件读取相关的变量

var imgFile;

//为文件读取成功设置事件

reader.οnlοad=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.验证是否有图片存在

~~~javascript

//是否有图片验证

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编码的方式传给后端

~~~javascript

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.后端代码

~~~go

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

}

~~~

该DEMO使用的是原生Js，图片通过base64编码传输。

>如有小伙伴对代码有异议或建议提供的，请关注“今日头条”的帐号“编程践行者”。大家一起讨论，一起学习，欢迎骚扰

有疑问加站长微信联系(非本文作者))

转载至：CSDN weixin_39556853(weixin_39556853) https://blog.csdn.net/weixin_39556853/article/details/119472111