Question

我想上传大文件。所以我将一个巨大的文件分成10Mb blob。

使用大约200Mb的文件上传效果很好。

但是上传2GB文件，Chrome的控制台错误：

净:: ERR_FILE_NOT_FOUND

我的环境：

Chrome 53

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="testapp" ng-controller="testctl">
    <input type="file" id="file">
    <input type="button" ng-click="one()" value="test_split_upload">
</div>

<script>

    (function () {
        'use strict';
        angular
                .module('testapp', [
                ])
                .controller('testctl',['$scope','$http','$q',function ($scope,$http,$q) {
                    $scope.one = function () {
                        $scope.file = $('#file').get(0).files[0];
                        $scope.splitfilea(1);
                    };

                    $scope.splitfilea = function (currentpage) {
                        let persize=1024*1024*10; //10Mb
                        let allpage = Math.ceil($scope.file.size/persize);
                        let start = (currentpage-1)*persize;
                        let end = start+persize;
                        if(currentpage===allpage){
                            end=$scope.file.size;
                        }
                        $scope.filesplitdata = $scope.file.slice(start, end);
                        $scope.r = new FileReader();
                        $scope.r.readAsDataURL($scope.filesplitdata);
                        $scope.r.onloadend=function (e) {
                            console.log(currentpage);
                            var bolb = e.target.result;
                            $scope.encode_blob = new Blob([bolb]);
                            $q.when($scope.httppost($scope.encode_blob)).then(function () {
                                delete $scope.formData;
                                if(currentpage<=allpage){
                                    currentpage = currentpage+1;
                                    $scope.splitfilea(currentpage);
                                }else{
                                    console.log('end');
                                }
                            });
                        };
                    };

                    $scope.httppost = function (blob) {
                        var deferral_local = $q.defer();
                        $http({
                        method: 'POST',
                        url: '/test/up4/1.php',
                        headers: {
                            'Content-Type': undefined
                        },
                        data: {
                            abc: blob,
                            filename:"xxxxxxx.txt",
                            type:"xxxxxx"
                        },
                        transformRequest: function (data, headersGetter) {
                            if(!$scope.formData){
                                $scope.formData = new FormData();
                            }
                            angular.forEach(data, function (value, key) {
                                if(key === "abc"){
                                    $scope.formData.append(key, value,"xxx.txt");
                                }else{
                                    $scope.formData.append(key, value);
                                }
                            });
                            var headers = headersGetter();
                            delete headers['Content-Type'];

                            return $scope.formData;
                        }
                    }).success(function (response) {
                            deferral_local.resolve( { status: 'good' } );
                        });
                        return deferral_local.promise;
                    };

                }]);
    }());

</script>

</body>
</html>

4.php是空的。

<?php

?>

Answer 1

我不确定是否会通过自己创建文件来重新发明轮子。查看AngularJS文件上载库，例如ng-file-upload。

此库允许您在文件上载对象上设置ngf-max-size属性指令。他们的示例显示ngf-max-size="10GB"，所以我不怀疑这个库是否足以处理您的文件上传。

Answer 2

这是Chrome的Bug 关于这个：https://bugs.chromium.org/p/chromium/issues/detail?id=375297

我将Chrome升级到57，并且所有文件都运行良好... ^ _ ^

上传一个巨大的文件〜2GB大小会导致浏览器错误

2 个答案: