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

更新日期: 2019-02-27阅读: 3.2k标签: blob

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();
    };


来自:https://segmentfault.com/a/1190000018326499


链接: https://www.fly63.com/article/detial/2138

html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

html5中Blob是什么?js如何创建Blob对象?Blob类型转换:String转换成Blob对象、TypeArray转换成 Blob对象 、ArrayBuffer转Blob、将Blob对象转换成String字符串,使用FileReader的readAsText方法 、将Blob对象转换成ArrayBuffer

前端js实现Blob、DataURL、canvas、image的相互转换

canvas转dataURL:canvas对象、转换格式、图像品质;DataURL转canvas;image转canvas:图片地址;dataURL转image,这个不需要转,直接给了src就能用

js blob流和base64,以及file和base64的相互转换

file文件转换为base64,得到base64格式图片;base64转换为file;base64转换为blob流;blob流转换为base64;测试案例,可直接复制运行

通过Blob实现文件下载

最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载

ArrayBuffer 和 Blob 对象

ArrayBuffer 对象与 Blob 对象大家或许不太陌生,常见于文件上传操作处理(如处理图片上传预览等问题)。那么本文将与大家深入介绍两者。ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范

你不知道的 Blob

Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!