相关疑难解决方法(0)

在按下提交按钮,文件的数组($scope.files,可以少为一个文件,多达用户希望)通过被提交FormData,并XMLHttpRequest在我的角度功能$scope.uploadFiles:

$scope.uploadFiles = function() {
    for (var i in $scope.files) {
        var form = new FormData();
        var xhr = new XMLHttpRequest;

            // Additional POST variables required by the API script
        form.append('destination', 'workspace://SpacesStore/' + $scope.currentFolderUUID);
        form.append('contenttype', 'idocs:document');
        form.append('filename', $scope.files[i].name);
        form.append('filedata', $scope.files[i]);
        form.append('overwrite', false);

        xhr.upload.onprogress = function(e) {
            // Event listener for when the file is uploading
            $scope.$apply(function() {
                var percentCompleted;
                if (e.lengthComputable) {
                    percentCompleted = Math.round(e.loaded / e.total * 100);
                    if (percentCompleted < …

我需要上传文件,我使用$ http(这段代码来自我的.service()函数):

sendFile: function (params) {
            return $http({method : 'post',
                url : 'http://XXXXXXXXXXXXX/rest/file.json',
                headers : { 'X-CSRF-Token' : $cookies['csrftoken']},
                data : params
            })
        },

现在,对于小文件和良好的线路没有问题,但是对于大文件和/或坏/慢线路存在UI问题:用户无法知道何时上传将结束.我需要一个进度条.

所以我在互联网上搜索,但我还没有找到解决方案.是否有可能从$ http获得一些进展/通知？

我没试过这个代码:

ProfileService.sendFile(data)
                    .then(function(ret) {
                            var uri = ret.data.uri;
                            scope.content = "Upload finished";

                            scope.postForm.fid = ret.data.fid;
                            scope.postForm.buttonDisabled = false;
                        },
                        function(error) {
                            scope.postForm.showError = true;
                            scope.postForm.errorMsg = error.data;
                        },
                        function(progress) {
                            console.log("inside progress");
                            console.log(progress)
                        }
                    );

永远不会调用"进度"功能.

我正在使用角度1.2.x

谢谢.

现在,Angular 1.5.4最终允许您跟踪$ http提供程序上的进度事件,但出于某种原因,我一直将$ rootScope作为响应而不是实际进度(我将其用于上传)信息.由于缺乏示例,我在Angular回购中找到了一些测试并遵循了但没有成功.

restClientInstance.post = function (requestParams) {
    var postParams = {
        method: "POST",
        url: API_URL + requestParams.url,
        headers: requestParams.headers,
        data: requestParams.data,
        eventHandlers: {
            progress: function (c) {
                console.log(c);
            }
        },
        uploadEventHandlers: {
            progress: function (e) {
                console.log(e);
            }
        }
    };

    var promise = $http(postParams)
    $rootScope.$apply();
    return promise;
};

在这两种情况下,它都安装$ rootScope而不是lengthComputable

我正试图从AngularJS $ http POST请求获取文件上传的"进度"事件.

在AngularJS中查看$ http上传文件进度后,我遇到了一个最近的angular.js git commit,它假设解决了 将$ XHR进度事件处理添加到$ http和$ httpBackend的问题.

有没有人实现这个工作？如果是这样,可以展示这个例子吗？

PS.我宁愿继续使用$ http而不是创建自己的XMLHttpRequest.原因是我的后端希望将json对象与多部分文件数据结合起来.并且尝试通过XMLHttpRequest失败,并显示错误消息,即后端未看到请求的json对象部分"必需字符串参数'objData'不存在.客户端发送的请求在语法上是不正确的." 在POST消息中,我在Firebug中看到"Content-Disposition:form-data; name ="objData"".

   $scope.uploadFile = function() {
    var url = buildUrl('/upload');
    var data = {objData: $scope.data, fileData: $scope.file};
    var formData = new FormData();

    formData.append("objData", angular.toJson(data.objData));
    formData.append("fileData", data.fileData);

    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);

    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type","application/json;charset=utf-8");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.send(formData);
};