如何從 javascript 中的本地文件圖像創建 base64 編碼的字符串

Question

我一直在嘗試從本地計算機轉換圖像文件，但它似乎對我不起作用。 我不想使用輸入上傳圖像，因為我只有生產中的圖像路徑，我想存儲 base64 字符串。 但如果有更好的方法我可以處理這個，那么我不介意

        const reader = new FileReader();
         const file = new File([imgUrl], { type: "image/png" });
        console.log(file);
        reader.addEventListener("load", function (e) {
            console.log(e.currentTarget.result);
        }, false);

        const data = reader.readAsDataURL(file);
        return data;
        }
        const img = "localhost:8080/start app abnner.png"; // my image path
        getDataUrl(img);

Answer 1

關鍵是使用 object 的結果屬性（請參閱FileReader API。 ）

const reader = new FileReader()
reader.readAsDataURL(image) // assuming "image" is your file
reader.result // here is your base64 string

所以在你的情況下，它應該是：

const data = reader.readAsDataURL(file);
return data.result;

---

我不得不做一次這樣的事情，所以如果你願意，我制作了一個小插件： encode-image-uri 。 它具有使用 Promise 的優勢，因此您 100% 確定只有在轉換完成且數據准備就緒時才調用任何 function。