使用ONSEN UI + Angular上传头像

Question

我怎样才能做一个非常简单的头像上传，比如什么是app的照片头像？我试图使用插件流，但没有成功。谢谢。

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>