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

};

總結

以上是生活随笔為你收集整理的Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。