javascript - 使用 Angular 将图像上传到 Kinvey

标签 javascript angularjs upload angularjs-scope kinvey

我正在尝试将照片上传添加到已在 Kinvey 的集合中设置的个人帐户。我一天大部分时间都在弄乱它,无法弄清楚。有人对我应该如何设置有任何建议吗? 谢谢!

编辑:

所以我进一步研究了如何做,Kinvey 说要像这样构造它:var fileContent = 'file-content-string'; var promise = $kinvey.File.upload(fileContent, { _id : '我的文件 ID', _filename : '我的文件.txt', mimeType : 'text/plain', 大小:文件内容.长度 });

但是我不清楚如何将其实现到我的 Angular 代码中。我正在使用 ng-file-upload 所以我的 Angular 代码应该是这样的:

               var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $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({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        data: {myObj: $scope.myModelObj},
        file: file,
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];

我怎样才能将这些结合起来使其发挥作用? 谢谢。

最佳答案

使用 Kinvey 和 AngularJS 进行简单的文件上传 http://bit.ly/1ncdQLq

<!DOCTYPE html>
<html>
<head>
    <title>Kinvey File Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="https://da189i1jfloii.cloudfront.net/js/kinvey-angular-1.1.4.min.js"></script>
</head>


<body ng-app="kinveyUploadApp" ng-controller="MainCtrl">

<input type="file" id="files" name="files[]" />
<p ng-if="fileModel">
File Size: {{fileModel.size}} Last Modified: {{fileModel['_kmd'].lmt | date:'yyyy-MM-dd HH:mm:ss Z'}}
</p>

<script>
    angular.module('kinveyUploadApp', ['kinvey'])
            .run(['$kinvey', function ($kinvey) {
                // Kinvey initialization starts
                var promise = $kinvey.init({
                    appKey: 'appKey',
                    appSecret: 'appSecret'
                });
                promise.then(function () {
                    // Kinvey initialization finished with success
                    console.log("Kinvey init with success");

                }, function (errorCallback) {
                    // Kinvey initialization finished with error
                    console.log("Kinvey init with error: " + JSON.stringify(errorCallback));
                });
            }])

            .controller('MainCtrl', ['$scope', '$kinvey', function ($scope, $kinvey) {

                $scope.fileModel = {};

                angular.element(document).find('input')[0].addEventListener('change', function (e) {
                    var theFile = e.target.files[0];

                    var promise = $kinvey.File.upload(theFile, {
                        _filename: theFile.name,
                        public: true,
                        size: theFile.size,
                        mimeType: theFile.type
                    }).then(function (_data) {
                        console.log("[$upload] success: " + JSON.stringify(_data, null, 2));
                        $scope.fileModel = _data;
                    }, function error(err) {
                        console.log('[$upload] received error: ' + JSON.stringify(err, null, 2));
                    });
                }, false);
            }]);
</script>
</body>

关于javascript - 使用 Angular 将图像上传到 Kinvey,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23747145/

相关文章:

javascript - JavaScript 中的过滤器不起作用

javascript - 防止先前但运行时间较长的 $http 请求在最近的请求后返回

javascript - 如何从 angularjs/express 应用程序中的表单获取数据

angularjs - 运行 webpack 有效,但 WebStorm 报告错误

php - 使用 $_FILES 和 PHP 上传文件

upload - 如何使用 CasperJS 通过普通 Javascript 进行文件 POST,而不是通过 UI

javascript - 刻不加日

javascript - Highcharts Columnrange数据标签高低不同颜色

javascript - 简单闭包与带有嵌套函数返回的闭包

jQuery iframe 多次加载