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

问题描述

我想做什么...



用户点击上传图片按钮

用户选择一个来自本地机器的图像

图像上传到页面

图像存储在本地存储中

用户可以离开视图然后返回视图并查看以前上传的图像。

重复步骤1 - 5



我认为我能实现它...


用于管理用户上传的
ng-flow插件

将图像转换为base64并将图像存储为本地存储中的字符串

获取base64字符串并将其转换为图像进行预览。



为什么我要这样做...



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



我的导师鼓励让我使用论坛，知道我发布了这个。



到目前为止的代码......



我的观点

What I want to do…

User clicks ‘upload image’ button
User selects an image from local machine
Image is uploaded to the page
Image is stored in local storage
User can navigate away from view and then return to the view and see the previously uploaded images.
Repeat steps 1 - 5

How I think I can achieve it…

ng-flow plugin to manage user uploads
convert image to base64 and store image as string in local storage
get base64 string and convert it to image for preview.

Why I want to do this…

For phase 1 I need to show my tutor how my application will work, so I just need to imitate the images stored in a database, this is why I'm using local storage - I understand this is bad practice but I also need to show use of local storage.

My tutor encouraged me to use forums and knows I posted this.

Code so far…

My view

<!-- Upload multiple images with the extensions of png,jpg, jpeg & gif -->
<div flow-init="{target: '/upload', singleFile: false}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">



    <div class="jumbotron">
        <div class="container">
            <div><span class="btn btn-default btn-selectimage" flow-btn flow-attrs="{accept:'image/*'}" >Select image</span></div>
            <br><p>Only PNG,GIF,JPG files allowed.</p>
        </div>
    </div>


<div>
    <div class="thumbnail" ng-hide="$flow.files.length">
        <img src="images/no-images-placeholder.jpg" />
    </div>
    <div class="thumbnail col-md-3" ng-show="$flow.files.length" ng-repeat="image in $flow.files">
        <img id="image-handle" class="preview-blob" flow-img="image" /><br>
        <img class="preview" ng-src="{{imageStrings[$index]}}"/>

    <div class="image_option_controls">
        <span class="btn glyphicon glyphicon-trash" ng-show="$flow.files.length" ng-click="image.cancel()"></span>
        <span class="btn glyphicon glyphicon-heart pull-right" ng-click="image.like()"></span>
    </div>
    </div>
</div>



</div> 

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

My Controller - so far...

angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
    var myImage = [];

    $localStorage.myImage = document.getElementById('image-handle');
    console.log($localStorage.myImage);
});

我可以选择图像并在页面上预览它们，当我检查页面时，图像src已被转换为基础64.从这里关于我如何获得基本64字符串并存储它的意思。



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



提前致谢！

I can select images and preview them on the page, when I inspect the page the image src has been converted to base 64. From this point on I'm stuck on how to get the base 64 string and store it.

Sorry for the rookie post, any tips or pointers would be greatly appreciated.

Thanks in advance!

推荐答案

这篇关于如何上传图像并存储在本地存储（angularjs）中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！