Javascript : store an image in the browser, 然后在 Markdown 中使用它

Question

我正在实现一个 markdown 编辑器，它接受语法为

的图像

![any text](http url)

虽然我使用这种语法是因为它在我的情况下更简单(但语法并不真正相关，也不起作用)

![ID]
...
[ID]: url ("Image title")

当我给图片一个 URL 时效果很好，但我要做的是将图片存储在浏览器中并显示它，然后如果用户发布他的内容，应上传图片。

这似乎是节省服务器空间的最佳选择，但我不知道是否可行。

我试过使用 base64 图像，但 URL 非常大，它会导致解析器失败。

我愿意接受任何处理这个问题的建议，或者如果你知道如何做我想做的，请随时向我解释!

到目前为止，我测试的代码:

fileChange(event: Event) {
  const files = (event.target as HTMLInputElement).files;

  if (!files || !files.length) { return; }

  for (let i = 0; i < files.length; i++) {
    const file = files.item(i);
    const fileType = file.name.split('.').slice(-1).toString();
    if (/* wrong extension */) { continue; }
    if (/* wrong size */) { continue; }
    this.createMediaUrl(file);
  }
}

createMediaUrl(file: File) {

  const media: { file: File, id: string, url: string, name: string } = {} as any;

  const FR = new FileReader();
  FR.onload = () => media.url = FR.result;
  FR.readAsDataURL(file);
  media.name = file.name;
  media.id = Math.random().toString(36).slice(-6);
  media.file = file;
  this.medias.push(media);
  console.log(media);
}

我应该声明我在 Typescript 工作，但这是一个 Javascript 问题(至少对我而言)。

除了这个问题，我在任何其他事情上都不需要帮助:我发布的代码是一个简化的代码，我的所有检查都很好等等。我唯一的问题是 Markdown 。

提前致谢!

Answer 1

这种情况正是为什么 URL.createObjectURL()被添加到规范中。 Base64 编码的字符串在达到各种 API 的大小和/或内存限制时可能会导致问题，因此可以访问 blob 的短临时本地 URI 字符串。可以很方便，碰巧的是，这正是您所需要的:

createMediaUrl(file: File) {
  const media: { file: File, id: string, url: string, name: string } = {} as any;

  media.url = URL.createObjectURL(file);
  media.name = file.name;
  media.id = Math.random().toString(36).slice(-6);
  media.file = file;
  this.medias.push(media);
  console.log(media);
}

参见 supporting browsers .

^{(感谢 @T.J.Crowder 提供链接)}