摘要：處理業(yè)務(wù)邏輯元素的事件觸發(fā)后將銷毀對(duì)象釋放內(nèi)存。瀏覽器允許使用方法，針對(duì)對(duì)象生成一個(gè)臨時(shí)。這個(gè)以開(kāi)頭表明對(duì)應(yīng)一個(gè)對(duì)象。

</>復(fù)制代碼 
一：圖片以獨(dú)立文件的形式存儲(chǔ)在服務(wù)器的指定文件夾中，再將路徑存入數(shù)據(jù)庫(kù)字段中
二：將圖片轉(zhuǎn)換成blob，直接存儲(chǔ)到數(shù)據(jù)庫(kù)的 Image 類型字段中（這種方式負(fù)擔(dān)很大不建議使用）

blob (binary large object)二進(jìn)制大對(duì)象

前端發(fā)起get請(qǐng)求后，后端可直接返回圖片在服務(wù)器中地址

</>復(fù)制代碼 

</>復(fù)制代碼 
form表單的Input標(biāo)簽的file類型，提供了上傳文件的功能，通過(guò)此類型，可以上傳文件到服務(wù)器
formData對(duì)象可以異步上傳二進(jìn)制文件formData文檔
FileReader對(duì)象可以異步讀取二進(jìn)制文件FileReader文檔

1.HTML結(jié)構(gòu)

</>復(fù)制代碼 

2.js定義個(gè)上傳圖片的函數(shù)，上傳成功可以在本地顯示

</>復(fù)制代碼 
function uploadImg() {
        var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對(duì)象
        var reads = new FileReader();
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {//判斷有沒(méi)有選擇圖片
            $.messager.alert("提示", "請(qǐng)選擇圖片");
            return;
        }
        var formFile = new FormData();
        formFile.append("action", "UploadVMKImagePath");
        formFile.append("file", fileObj);//添加字段和對(duì)應(yīng)的值
        var gUpImgUrl = constructURL(upApiKey, "upload");//這步為構(gòu)造訪問(wèn)地址
        var data = formFile;
        $.ajax({
            url: gUpImgUrl,
            data: data,
            type: "Post",
            dataType: "json",
            headers: {//token驗(yàn)證沒(méi)有不加
                token: sessionStorage.getItem("token"),
            },
            cache: false,//上傳文件無(wú)需緩存
            processData: false,//用于對(duì)data參數(shù)進(jìn)行序列化處理 這里必須false
            contentType: false, //必須
            success: function (result) {
                $.messager.alert("提示", "上傳成功");
                if (result.code == 0) {
                    //這里為你你成功后的回調(diào),可以傳成功后顯示在本地
                     reads.readAsDataURL(fileObj);//把文件對(duì)象讀成base64，讀完直接放到src中
                     reads.onload = function (e) {
                            document.getElementById(id).src = this.result;
                        };
                    
                }
            },
        });
    }

3.從服務(wù)器獲取二進(jìn)制流的圖片文件，并顯示

</>復(fù)制代碼 
本地的文件信息可以直接fileReader讀成base64顯示，而后端取得的二進(jìn)制流blob不一定可以
可以使用createObjectURL來(lái)讀成臨時(shí)的url  createObjectURL文檔

</>復(fù)制代碼 
function getImg(param, id) {//這里沒(méi)有用ajax當(dāng)時(shí)用ajax出現(xiàn)了問(wèn)題就用了原生發(fā)請(qǐng)求
        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;
                。。。//處理業(yè)務(wù)邏輯
                var img = document.getElementById(id);
                img.onload = function (e) {// 元素的onload 事件觸發(fā)后將銷毀URL對(duì)象, 釋放內(nèi)存。
                    window.URL.revokeObjectURL(img.src);
                };
                // 瀏覽器允許使用URL.createObjectURL()方法，針對(duì) Blob 對(duì)象生成一個(gè)臨時(shí) URL。
                  // 這個(gè) URL 以blob:開(kāi)頭,表明對(duì)應(yīng)一個(gè) Blob 對(duì)象。
                img.src = window.URL.createObjectURL(blob);
            }
        };
        xhr.send();
    };