如何上传图像并存储在本地存储（angularjs）中

Question

我想做什么......

1. 用户点击“上传图片”按钮
2. 用户从本地计算机中选择图像
3. 图片已上传到页面
4. 图像存储在本地存储
5. 用户可以远离视图导航，然后返回视图并查看以前上传的图像。
6. 重复步骤1 - 5

我认为我能做到这一点......

1. ng-flow插件管理用户上传
2. 将图像转换为base64并将图像存储为本地存储中的字符串
3. 获取base64字符串并将其转换为图像进行预览。

为什么我要这样做......

对于第1阶段，我需要向我的导师展示我的应用程序是如何工作的，所以我只需要模仿存储在数据库中的图像，这就是我使用本地存储的原因 - 我明白这是不好的做法，但我也是需要显示使用本地存储。

我的导师鼓励我使用堆栈溢出并知道我发布了这个。

到目前为止

代码......

我的观点     

{{1}}

我的控制器 - 到目前为止......

{{1}}

我可以选择图像并在页面上预览它们，当我检查页面时，图像src已经转换为基础64.从这一点开始，我就陷入了如何获得基本64字符串并存储它。

对于菜鸟帖子感到抱歉，任何提示或指示都将不胜感激。

提前致谢！

Answer 1

我最近读了一篇文章的目的非常相同，并且为图像执行此操作的一种方法是加载到canvas元素中。然后，使用画布，您可以将画布中的当前可视化表示作为数据URL读出。以下是代码段

<div>
    <div>

    </div>
    <span>

    </span>
</div>

DataURL是base64字符串，因为localstorage无法直接存储图像，并且在localstorage中存储图像并不常见。我可能错了。但是，这里有一个链接可以帮助您进一步https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/