使用ONSEN UI + Angular上传个人资料照片

Profile Photo Upload with ONSEN UI + Angular

本文关键字：个人资料 照片 Angular ONSEN UI 使用      更新时间：2023-09-26

我怎么能让一个非常简单的个人资料照片上传像什么的应用程序照片配置文件?我试图使用插件流，但没有成功。谢谢。

这是一个没有简单答案的大问题。这取决于你存储文件的位置和方式!

一般来说，您将创建一个表单来从用户计算机中选择图像，将其转换为适当的格式，然后将该数据传输到服务器。您的服务器将反转该过程并保存文件。

我认为你会遇到的最大障碍是AngularJS和许多后端框架处理文件的方式不同。

如果你正在使用Django(我推荐!!)，这里有一个方法来处理它:AngularJS到Django REST框架图片上传

PS -如果你对创建web应用程序感兴趣，我正在写一篇关于如何使用AngularJS与Django和PostgreSQL来做的教程。我还在开发这个应用程序，但是关于PANDA Stack作为应用程序平台的基础知识以及如何设置堆栈都在那里。什么都不卖，没有捐赠按钮。

我也遇到了同样的问题。这是我的解决方案。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>
相关文章：