处理javascript（客户端）中许多base64编码图像的实用方法？

Question

我正在建立一个允许用户下载个性化pdf的网站。 我正在尝试使用javascript库进行pdf生成，即jspdf或pdfkit 。 这两个库都不能使用路径在浏览器中包含图像。 他们需要一个以base64编码的数据URI。 Bummer，我必须包含很多图像。 这些图像存储在服务器上。

我正在寻找一种解决方法。 我正在考虑对所有图像进行批处理编码，并将相应的字符串存储在json文件中，然后在需要插入图像时从中读取。 我无法手动执行此操作，因为即使是单个字符串也会阻塞我的编辑器。 我也无法将编码后的字符串存储在数据库中，因为我没有。

我知道这个问题的框架不是很精确。 欢迎提出改进建议。

Answer 1

有几种方法可以做到这一点，我能想到的最直接的方法是从文件输入的onchange事件创建一个base64字符串，并将该文件传递给HTML Filereader api的onload事件。

html

<input type="file" onchange="selectFile(this.value)">

javascript

selectFile(event: Event | any) {
    if (event.target.files && event.target.files[0]) {
        const reader = new FileReader();

        reader.onload = (event: ProgressEvent) => {
            this.file = event.target.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
}

然后，您可以将this.file传递给您的api，或直接从reader.onload调用api