Javascript：将图像存储在浏览器中，然后在标记中使用它

我正在实现一个标记编辑器，它接受带有语法的图像

![any text](http url)

虽然我使用这种语法是因为它在我的例子中更简单（但语法并不真正相关，也不起作用）

当我为图片提供URL时，效果很好，但我要做的是将图片存储在浏览器中并显示它，然后如果用户发布其内容，应该上传图像

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

我尝试过使用base64图像，但是URL太大了，这使得解析器失败

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

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

fileChange（事件：事件）{
const files=（event.target作为HTMLInputElement）.files；
如果（！files | |！files.length）{return；}
for（设i=0；imedia.url=FR.result；
FR.readAsDataURL（文件）；
media.name=file.name；
media.id=Math.random（）.toString（36.slice（-6）；
media.file=文件；
此.medias.push（媒体）；
控制台日志（媒体）；
}

我应该声明我使用的是Typescript，但这是一个Javascript问题（至少对我而言）

除了这个问题，我也不需要任何其他帮助：我发布的代码是一个简化的代码，我所有的检查都很好等等。我唯一的问题是降价

---

提前谢谢你

这种场景正是添加到规范中的原因。Base64编码的字符串在达到各种API的大小和/或内存限制时可能会导致问题，因此访问短的、临时的本地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);
}

看

---

（感谢您的链接）

如果

数据：

URI对您不起作用（我并不感到惊讶），那么我认为您将没有太多选择，只能将图像放在服务器上并从那里引用，如果用户最终没有将其包含在帖子中，则在某个时候将其删除。我使用后端作为服务，当然，每一个电话和每一点存储都是要付费的。。。这就是为什么我要这个。是否有可以解决的方法？我有权访问解析的字符串，也许更改图片的来源会有用？你知道，我打赌你可以将其存储在本地存储（Base64）中，并使用a在本地处理假URL…EDIT没有看到你的答案，谢谢！我现在正在使用这种方法制作视频，在处理媒体方面我是个初学者。如果我知道我可以用它来拍照。。。明天我会和服务人员一起尝试。谢谢你的情报@trichetriche它适用于您传递给它的任何

blob

，包括构造的blob，这就是我如何实现的。（无耻的自我推销）@trichetriche:也许没有必要为此调查服务人员，正如Patrick指出的那样，这就是

createObjectURL

的目的。当你得到一个

文件

对象（拖放、文件输入等等）时，只要把它传递给

createObjectURL

，然后你就可以使用得到的URL了。如果用户保存了他们的帖子，你可以发布文件并更新文本中的URL以匹配保存的URL。那么，我明天就去试试。谢谢你的帮助！我忘了告诉你（如果你在乎的话），但这很有魅力。多亏了这一点，我甚至可以扩展解析器来处理视频。多谢各位！

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);
}