1.了解后端处理图像的方式
一：图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中 二：将图片转换成blob，直接存储到数据库的 Image 类型字段中（这种方式负担很大不建议使用）
blob (binary large object)二进制大对象
2.第一种前端直接将存储路径赋值给src属性即可轻松显示
前端发起get请求后，后端可直接返回图片在服务器中地址
3.第二种以二进制流传输图片与显示图片详解
form表单的Input标签的file类型，提供了上传文件的功能，通过此类型，可以上传文件到服务器 formData对象可以异步上传二进制文件 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
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(); };