Javascript：如何將文件位置保存到本地存儲？

Question

在Javascript（帶有Angular 2+）中，我有一個應用程序，試圖在用戶選擇了dataURl之后將其保存到本地存儲中。 目前，我已經嘗試了以下代碼，但是在檢索時，我得到了一個空的obj {}作為主體。

HTML

<input style="display:none;" type="file" (change)="fileEvent($event)" #file>

角度文件存儲和檢索功能

fileEvent(ev: any): void {
    console.log('Event select file', ev);    
    let obj: any = ev.target.files[0];
    let file: File = {
      Key: obj.name,
      ContentType: obj.type,
      Size: obj.size,
      Body: obj      
    };
    localStorage.setItem("myapp", JSON.stringify(file);
}

getFileFromLocalStorage {
     console.log(JSON.parse(localStorage.getItem("myapp"));
}

下面的文件檢索響應

Answer 1

您不能像這樣將圖像直接存儲到本地存儲。 首先，您需要將圖像轉換為Base64。 然后將Base64字符串保存在localStorage值中。

下面是將Image轉換為Base64的函數：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

現在，您可以將其保存到本地存儲中。

這是關於SO的參考答案 。