ajax method to retrieve images as a blob

go 服务端:

就是先把这个图片读出来 然后返回二进制的数据

Go 复制代码
	byteFile, err := ioutil.ReadFile("."  + "/processed/" + uuidStr+"processed.png")
	if err != nil {
		fmt.Println(err)
	}

	c.Header("Content-Disposition", "attachment; filename=file-name.txt")
	c.Data(http.StatusOK, "application/octet-stream", byteFile)

js 前端获取图片:

javascript 复制代码
function doSomething() {
            //	var videoData = "";
            var fileObj = document.getElementById("fileimage").files[0]; // js 获取文件对象
            var formData = new FormData();
            formData.append("file", fileObj); //上传一个files对象
            // formData.append("参数", "参数1"); //若需要上传的多个参数
            // formData.append("参数", "参数2");
            var url = "http://127.0.0.1:8000/upload/histogram";
            $.ajax({
                url: url,
                // dataType:"text",
                // dataType: "json",
                type: "post",
                data: formData,
                processData : false, //不处理发送的数据
                contentType: false, //不设置Content-Type请求头
                xhrFields:{
                    responseType: 'blob'
                },
                success: function(res) {
                    console.log(111)
                    var img = document.getElementById('img-from-local-storage');
                    var url = window.URL || window.webkitURL;
                    img.src = url.createObjectURL(res);
javascript 复制代码
    <img id="img-from-local-storage" />

参考文章:

Sending image files from back-end to front-end - JavaScript - The freeCodeCamp Forum

相关推荐
想要学好前端的阿毛2 分钟前
React状态管理库 -- Redux篇
前端
拾光拾趣录3 分钟前
前端宏(微)任务 | 从“为什么我的代码不按顺序执行”说起
前端·javascript
林太白7 分钟前
NestJS-菜单模块
前端·后端·nestjs
程序员ys8 分钟前
微前端(What)
前端·架构
狗都不学爬虫_9 分钟前
JS逆向 - (国外)SHEIN站 - 请求头(armorToken、Anti-in)
javascript·python·ajax·网络爬虫·wasm
用户7974761127311 分钟前
Mysql RR事务隔离级别引发的生产Bug,你中招了吗?
前端
Mintopia12 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
JarvanMo21 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093124 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙24 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试