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