原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)

比特青焰引
• 阅读 8627

1.了解后端处理图像的方式

一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中
二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)

blob (binary large object)二进制大对象

2.第一种前端直接将存储路径赋值给src属性即可轻松显示

前端发起get请求后,后端可直接返回图片在服务器中地址

<img src="https://profile.csdnimg.cn/3/D/B/1_qq_42518647" class="img" alt="" >

3.第二种以二进制流传输图片与显示图片详解

form表单的Input标签的file类型,提供了上传文件的功能,通过此类型,可以上传文件到服务器
formData对象可以异步上传二进制文件formData文档
FileReader对象可以异步读取二进制文件FileReader文档

1.HTML结构

<input type="file" name="FileUpload" id="FileUpload">
<input value="上传图片" type="button" id="btn_uploadimg" onclick="uploadImg()">

2.js定义个上传图片的函数,上传成功可以在本地显示

function uploadImg() {
        var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
        var reads = new FileReader();

        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {//判断有没有选择图片
            $.messager.alert('提示', "请选择图片");
            return;
        }
        var formFile = new FormData();
        formFile.append("action", "UploadVMKImagePath");
        formFile.append("file", fileObj);//添加字段和对应的值
        var gUpImgUrl = constructURL(upApiKey, "upload");//这步为构造访问地址
        var data = formFile;
        $.ajax({
            url: gUpImgUrl,
            data: data,
            type: "Post",
            dataType: "json",
            headers: {//token验证没有不加
                token: sessionStorage.getItem("token"),
            },
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (result) {
                $.messager.alert('提示', "上传成功");
                if (result.code == 0) {
                    //这里为你你成功后的回调,可以传成功后显示在本地
                     reads.readAsDataURL(fileObj);//把文件对象读成base64,读完直接放到src中
                     reads.onload = function (e) {
                            document.getElementById(id).src = this.result;
                        };
                    
                }
            },
        });
    }

3.从服务器获取二进制流的图片文件,并显示

本地的文件信息可以直接fileReader读成base64显示,而后端取得的二进制流blob不一定可以
可以使用createObjectURL来读成临时的url createObjectURL文档
function getImg(param, id) {//这里没有用ajax当时用ajax出现了问题就用了原生发请求
        var _url;
        _url = RequestUrl.constructURL("CUSTOMERS", "getimg", param);
        var xhr = new XMLHttpRequest();
        xhr.open('GET', _url, true);
        xhr.responseType = "blob";
        xhr.setRequestHeader("token", sessionStorage.getItem("token"));
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                。。。//处理业务逻辑
                var img = document.getElementById(id);
                img.onload = function (e) {// 元素的onload 事件触发后将销毁URL对象, 释放内存。
                    window.URL.revokeObjectURL(img.src);
                };
                // 浏览器允许使用URL.createObjectURL()方法,针对 Blob 对象生成一个临时 URL。
                  // 这个 URL 以blob:开头,表明对应一个 Blob 对象。
                img.src = window.URL.createObjectURL(blob);
            }
        };
        xhr.send();
    };
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
springboot项目文件上传(绝对路径)并使用tomcat虚拟路径进行图片预览
前言项目中,需要上传文件,但是可能会比较多,所以不能放入项目目录中,需要指定目录并按顺序放置。并且:还需要这些数据可以预览(图片等)。那么问题就是:上传完成之后我存入服务器,并拿到绝对路径,存入数据库,那么,前台访问的时候请求地址肯定是:ip端口项目名,那么该如何获取资源呢?正文:1\.文件上传到指定目录(服务
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Django之Django模板
1、问:html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012082616:00:00,但是页面显示的却是Aug.26,2012,4p.m.答:为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td{{dayrecord.p\_time|date:
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
FPGA+CPU助力数据中心实现图像处理应用体验与服务成本新平衡
!(https://oscimg.oschina.net/oscnet/b27bc0d4a279e71e209ef9a9520ee00c145.jpg)图片逐渐成为互联网主要的内容构成,相应的图片处理需求也在高速成长,移动应用与用户生产内容(UGC)正在驱动数据中心图像处理的业务负载快速增加。本文深维科技联合创始人兼CEO樊平详细剖析了
Wesley13 Wesley13
3年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Stella981 Stella981
3年前
Fastdfs安装_nginx进行图片动态压缩
说明1.因为上传的图片较大,部分页面直接引用图片地址,则造成页面加载缓慢问题。2.考虑到服务器空间问题,我们没有进行上传缩略图。仅仅是上传了原图3.为了优化页面加载图片的时间问题,所以对图片进行动态缩放。PS:如果访问量较高,建议进行存储缩略图图片缩放采用nginx的http\_image\_filter\_module
Stella981 Stella981
3年前
Javascript验证上传图片大小[前台处理]
需求分析:在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:1)后台处理:也就是AJAXPOST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。2)前台处理:也就是利用Javascript获取该图片大小。显然第一种方式,很不好。因为需要把文件先上传到
Wesley13 Wesley13
3年前
HTML5印章绘制电子签章图片,中文英文椭圆章、中文英文椭圆印章
电子签章图片采集印章图片的采集两种互补方式:方式1:在线生成印章图片方式,但是这种方式有个弊端,对印章中公司名称字数有限制,字数越多可能就完蛋了。方式2:上传印章扫描件,系统来对扫描图片进行处理,提取扫描件中的印章图片。本文介绍方式1,方式2待后续发布,方式1本来想用java实现印章图片生成,虽
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(