共计 2108 个字符，预计需要花费 6 分钟才能阅读完成。
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();
};
