Question

我编写了一个服务，它允许我将给定文件和json对象一起上传到给定的URL。我的代码是：

(function() {
    angular.module('petrofacApp')
        .service("fileUpload", fileUpload);

        function fileUpload() {

            function uploadFileToUrl(file, uploadUrl, jsonRequest, callback){
                var fd = new FormData();
                fd.append('JsonRequestData', JSON.stringify(jsonRequest));
                fd.append('file', file, file.name);

                var xhr = new XMLHttpRequest();

                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                       var percentComplete = (e.loaded / e.total) * 100;
                       console.log(percentComplete);
                    }
                };

                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        callback(xhr.response);
                    }
                }; 

                xhr.open('POST', uploadUrl, true);              
                xhr.send(fd);
            }

            return {
                uploadFileToUrl: uploadFileToUrl
            }
        }
 }());

我的问题是 - 如果我提到onprogress事件为

            xhr.onprogress = function(e) {
                if (e.lengthComputable) {
                   var percentComplete = (e.loaded / e.total) * 100;
                   console.log(percentComplete);
                }
            };

文件上传没有任何问题，但onprogress事件只在上传完成时被触发一次。

我发现，为了避免这个问题，我必须使用upload.onprogress。所以我将代码更改为

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                   var percentComplete = (e.loaded / e.total) * 100;
                   console.log(percentComplete);
                }
            };

当我执行此操作时，我收到错误 -

XMLHttpRequest无法加载http://192.168.xxx.xxx:6152/api/UploadFile。预检的响应具有无效的HTTP状态代码405。

请帮我解决这个问题。

Answer 1

问题与CORS有关。我通过从Nuget安装“CORS”然后将以下代码添加到WebApi.config文件来从服务器端修复它

$x !== $y

这解决了我的问题。

使用xhr javascript格式化数据上传进度

1 个答案: