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

相关推荐
GISer_Jinger5 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话6 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时6 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳6 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹8 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子8 分钟前
深入解析 iframe
前端
WEI_Gaot9 分钟前
ES6 模板字符串
前端·javascript
前端大白话9 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
前端大白话9 分钟前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
长欢9 分钟前
保持元素宽高比
javascript