上傳圖像使 base64 數據

Question

我正在使用<input type="file">將圖像上傳到我的網站，它工作正常，但圖像始終被加密為 base64 作為一堆卡住的隨機字符。 當有很多圖像並且從服務器上傳和接收需要更長的時間時，這會給我造成延遲。

有沒有更好的上傳圖片的方法？ 並且在 base64 中沒有它？ 這是我用於在頁面上顯示圖像的代碼

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function(oFREvent) {
// var ID is predefined
    document.getElementById(ID).innerHTML = `
    <image src="${oFREvent.target.result}" width="200px" height="200px" ></image>`;
};

function loadImageFile() {

    if (document.getElementById("uploadImage").files.length === 0) {
        return;
    }
    var oFile = document.getElementById("uploadImage").files[0];
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
    oFReader.readAsDataURL(oFile);
}

Answer 1

您可以使用URL.createObjectURL(File); 為要顯示的文件（圖像）創建 url，然后在 src 屬性中使用它來顯示它。

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }

    var oFile = document.getElementById("uploadImage").files[0];
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
    
    var img = document.createElement("img");
    img.src = URL.createObjectURL(oFile);
    img.width = 200;
    img.height = 200;
    img.onload = function() {
        URL.revokeObjectURL(this.src);
    }
    document.getElementById(ID).appendChild(img);
}

為了更好地了解正在發生的事情，請查看文檔

https://developer.mozilla.org/en-US/docs/Web/API/File

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images