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

yuxue 发布于2019-08-23 15:31 / 3390人阅读

摘要：处理业务逻辑元素的事件触发后将销毁对象释放内存。浏览器允许使用方法，针对对象生成一个临时。这个以开头表明对应一个对象。

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

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

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

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

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

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

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

1.HTML结构

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

idc机房托管专线服务图片一直显示图片上传中服务器接收上传的图片手机端上传图片安卓端上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102185.html

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

摘要：处理业务逻辑元素的事件触发后将销毁对象释放内存。浏览器允许使用方法，针对对象生成一个临时。这个以开头表明对应一个对象。 1.了解后端处理图像的方式一：图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中二：将图片转换成blob，直接存储到数据库的 Image 类型字段中（这种方式负担很大不建议使用） blob (binary large object)二进制大对象...

Airmusic 2019-08-02 14:21 评论0 收藏0
移动端H5实现图片上传

摘要：需求公司现在在移动端使用实现图片上传，但最近需求太奇葩了，插件无法满足我们的经过商讨决定下掉这个插件，使用原生的实现图片上传。首先是有几种常见的移动端图片上传方式通过对象可以组装一组用发送请求的键值对。需求公司现在在移动端使用webuploader实现图片上传，但最近需求太奇葩了，插件无法满足我们的PM经过商讨决定下掉这个插件，使用H5原生的API实现图片上传。 7.3日发布：单张...

WelliJhon 2019-08-05 17:55 评论0 收藏0
浅析前端上传

摘要：项目上也用到很多上传文件的地方，七牛云，阿里云，讯飞上传都接触过，所以在这里做一个记录，总结一下前端上传的几种方式。类型的文件名七牛云上传浅析是一个基于七牛开发的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 图片，音频，视频等等这几种常见的资源类型，如果需要从前端上传到服务端，有几种方式呢？不妨回顾一下...

terro 2019-08-26 10:13 评论0 收藏0
zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

摘要：移动端文档富文本编辑器，支持图文混排引用大标题无序列表，字体颜色加粗斜体。可用于独立项目开发，也可以用于与原生混合开发。，图片文件最大尺寸限制，单位，默认，编辑器左右内边距，默认像素，是否显示底部工具栏图片标签连接添加等图标。 ZxEditor 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。可用于独立web项目开发，也可以用于与原生A...

lansheng228 2019-08-23 10:47 评论0 收藏0
zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

摘要：移动端文档富文本编辑器，支持图文混排引用大标题无序列表，字体颜色加粗斜体。可用于独立项目开发，也可以用于与原生混合开发。，图片文件最大尺寸限制，单位，默认，编辑器左右内边距，默认像素，是否显示底部工具栏图片标签连接添加等图标。 ZxEditor 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。可用于独立web项目开发，也可以用于与原生A...

wind3110991 2019-08-05 14:38 评论0 收藏0