Question

我正在尝试使用基于找到here的示例的ng-file-upload实现文件上传功能。

除了当我尝试将文件上传到我的本地网络服务器时，一切似乎工作正常，我得到Error Code 405 (Method not allowed)。

以下是我的标记的一部分：

<div class="block form-group">
        <label for="photo">Photos:</label>
        <input type="file" ngf-select ng-model="addCourtCtrl.picFile" name="file"
               accept="image/*" ngf-max-size="2MB" required
               ngf-model-invalid="errorFile">
        <img ng-show="addRegisterForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> 
        <button ng-click="addCourtCtrl.picFile = null" ng-show="addCourtCtrl.picFile">Remove</button>
        <br>
        <button ng-click="addCourtCtrl.uploadPic(addCourtCtrl.picFile)">
            Upload
        </button>
        <span class="progress" ng-show="addCourtCtrl.picFile.progress >= 0">
            <div style="width:{{addCourtCtrl.picFile.progress}}%"
                 ng-bind="addCourtCtrl.picFile.progress + '%'"></div>
        </span>
        <span ng-show="picFile.result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </div>

以及我上传功能的定义：

this.uploadPic = function (file) {
        file.upload = Upload.upload({
            url: '/www/images/uploads/courts',
            data: { username: __this.username, file: file },
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
            });
        }, function (response) {
            alert('Upload Failed');
            if (response.status > 0)
                __this.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
            // Math.min is to fix IE which reports 200% sometimes
            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }

我正在使用gulp的网络服务器来运行此应用程序，当我使用示例中的相同上传网址时，错误并未显示。

我一直在研究与此问题相关的一些问题，但我是Angular的新手，我发现大多数答案有点过于复杂。

我希望有人可以帮助我。提前谢谢。

Answer 1

您很可能面临CORS问题。如果从不同的域执行，则拒绝来自浏览器的Ajax请求。您需要将CORS头添加到后端。请点击此处了解有关CORS的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

使用ng-file-upload

1 个答案: