Question

如何制作非常简单的个人资料照片上传内容，例如应用照片资料？我试图使用插件流但没有成功。感谢。

Answer 1

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

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

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

如果你正在使用Django（我推荐!!），这是处理它的一种方法： AngularJS to Django REST Framework Image Upload

PS - 如果您对创建Web应用程序感兴趣，我正在撰写有关如何使用AngularJS与Django和PostgreSQL进行操作的教程。我还在开发应用程序，但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>

使用ONSEN UI + Angular

2 个答案: