使用 angularjs 上传大型 mp4 视频文件答案

【问题标题】：Uploading big mp4 video files using angularjs使用 angularjs 上传大型 mp4 视频文件
【发布时间】：2017-06-30 01:39:44
【问题描述】：

我想使用 rest api 在我的 angular 应用程序中上传大型 mp4 视频文件（500MB - 1GB）（如果可能的话，在之前压缩它们）。我尝试使用ng-file-upload，但它不适用于大于 20Mb 的视频。

请问我怎样才能完成这样的任务？

PS：我的服务器端是用 PHP 编写的

【问题讨论】：

标签： angularjs rest video file-upload upload

【解决方案1】：

你可以尝试增加网页配置文件中的属性

    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="30000000" />
      </requestFiltering>
    </security>

【讨论】：

【解决方案2】：

从上面的描述看来，服务器对可以上传的最大文件大小可能有限制——这很常见，设置或更改最大大小的方法取决于服务器。作为示例，这里是 AWS S3 存储的一些配置，它显示了最小和最大文件大小：

   var s3Policy = {
        'expiration': expiration,
        'conditions': [{
                'bucket': aws.bucket
            },
            ['starts-with', '$key', path], 
            {
                'acl': readType
            },
            {
              'success_action_status': '201'
            },
            ['starts-with', '$Content-Type', request.type],
            ['content-length-range', 2048, 124857600], //min and max
        ]
    };

如果您只需要一些用于视频上传的示例 Angular 代码，那么下面的代码是如何将视频从网页/应用上传到服务器的示例 - 它是 AngularJS 1：

// Controls video upload from web uses module and apraoch at: https://github.com/danialfarid/angular-file-upload
app.controller('WebUploadCtrl',[ '$scope', '$upload','colabConfig', function($scope, $upload, colabConfig) {
    console.log("WebUploadCtrl controller");
    $scope.progressPerCent = 0;
    $scope.onFileSelect = function($files) {
        console.log("file selected for upload...");
        //$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: yourConfig.yourBaseURL + "/web_video_upload",
            method: 'POST',
            //headers: {'header-key': 'header-value'},
            //withCredentials: true,
            data: {myObj: $scope.myModelObj},
            file: file,
          }).progress(function(evt) {
              console.log("progress: " + (evt.position/evt.totalSize)*100);
              //$scope.$apply(function() {
                  $scope.progressPerCent = (evt.position/evt.totalSize)*100;
              //});
          }).success(function(data, status, headers, config) {
            // file is uploaded successfully
            console.log(data);
          }).error(function() {
            console.log("Error on web video upload");
          });
        }
    }
}]);

【讨论】：