如何在瀏覽器中本地保存拖動的圖像

Question

我是新的角度和使用github上的角度文件上傳項目https://github.com/danialfarid/angular-file-upload 在我的應用程序之一。到現在爲止，後端沒有準備好，我希望刪除的文件在本地顯示在瀏覽器中。有沒有辦法做到這一點？

我的視圖代碼：

<div ng-controller="MyCtrl"> 
    <input type="file" ng-file-select="onFileSelect($files)"> 
    <div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div> 
    <div id="image_drop_box" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional- css-class-name-or-function" ng-show="dropSupported">drop files here</div> 
    <div ng-file-drop-available="dropSupported=true" ng-show="!dropSupported">HTML5 Drop File is not supported!</div> 
    <button ng-click="upload.abort()">Cancel Upload</button> 
</div> 

和邏輯控制器看起來如下：

.controller('MyCtrl', function($scope){ 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var file = $files[i]; 
     $scope.upload = $upload.upload({ 
     //upload logic 
     }); 
    } 
    }; 
}); 

Answer 1

Convert the image into Base64 code and after that put the Base64 code in the src of imageg tag. 
And to convert Image into Base64 in angular I would recommend you to use 
[https://github.com/ninjatronic/angular-base64] 

After following instructions for using this library, you can simply call: 

    var imageData=$base64.encode(image); 
Don't forget to inject in your module: 

.module('myApp', ['base64'])