配置文件照片上傳與ONSEN用戶界面+角

Question

我怎樣才能使一個非常簡單的個人資料照片上傳像什麼是應用程序照片配置文件？我試圖使用插件流，但沒有成功。 謝謝。

Answer 1

這是一個沒有簡單答案的巨大問題。這取決於你在哪裏以及如何存儲你的文件！

通常，您將創建一個表單以從用戶的計算機中選擇圖像，將其轉換爲適當的格式，然後將該數據傳輸到您的服務器。您的服務器將反轉該過程並保存該文件。

我認爲你遇到的最大障礙是AngularJS和許多後端框架處理文件的不同方式。

如果你使用Django（我建議！），這裏是處理的一種方式： AngularJS to Django REST Framework Image Upload

PS - 如果你有興趣創建Web應用程序，我寫了一個教程關於如何在Django和PostgreSQL中使用AngularJS來做到這一點。我仍在開發應用程序，但作爲應用程序平臺的PANDA Stack的基礎知識以及如何設置堆棧。沒有什麼可出售的，沒有捐贈按鈕。

Answer 2

我有同樣的問題。 這是我的解決方案。 HTML：

<div id="photoWrapper" ng-click="showFIle()" ng-class="myVar" > 
    <img accept="image/x-png, image/gif, image/jpeg" ng-src="{{imgSrc}}" id="photo"></img> 
</div> 

代碼：

module.controller('LoginController', function($scope,$route,$window) { 
//localStorage.removeItem("photo"); *you can delete localstorage for debug. 
var fileDialog; 
$scope.imgSrc = "" 
ons.createDialog('templates/loadPicDialog.html', {parentScope: $scope}).then(function(dialog) { 
fileDialog = dialog; 
}); 
var storedPhoto = localStorage.getItem("photo"); 
      if(!storedPhoto){ 
       setTimeout(function(){ 
        fileDialog.show(); 
       },500) 
      } else {     
       $scope.imgSrc = localStorage.getItem("photo"); 
      } 

$scope.showFIle = function(){ 
       fileDialog.show(); 
        }      


$scope.myVar = "defaultPic"; 


$scope.savePicture = function(){ 
        var reader = new FileReader(); 
        reader.onload = (function(e) { 
         getImageData(e.target.result)  
        }); 
        var imageFile = document.getElementById('imgFileName').files[0]; 
        reader.readAsDataURL(imageFile); 
       } 

function getImageData(url) { 
     var data ; 
     var canvas, ctx; 
     var img = new Image(); 
     img.onload = function(){ 
      // Create the canvas element. 
      canvas = document.createElement('canvas'); 
      canvas.width = img.width; 
      canvas.height = img.height; 
      // Get '2d' context and draw the image. 
      ctx = canvas.getContext("2d"); 
      ctx.drawImage(img, 0, 0); 
      // Get canvas data URL 
      try{ 
      data = canvas.toDataURL(); 
      $scope.imgSrc = data; 
      localStorage.setItem("photo", data); 
      fileDialog.hide(); 
      $route.reload(); 
      }catch(e){ 
       console.log(e); 
      } 
     } 

     // Load image URL. 

     try{ 
      img.src = url;   
     }catch(e){ 
      console.log(e); 
     }  
    }}); 

和對話：

<ons-dialog style="height:130px;" var="fileDialog"> 
<ons-page> 
    <ons-toolbar> 
     <div class="center">File Upload</div> 
    </ons-toolbar> 
    <input id="imgFileName" type="file"/> 
    <div style="text-align: center; 
margin-top: 20px;"> 
    <ons-button onclick="fileDialog.hide()">Cancel</ons-button> 
    <ons-button ng-click = "savePicture()">Save</ons-button> 
    </div> 
    </ons-page> 
</ons-dialog>