文件上传并不总是在AngularJS中工作

时间:2015-08-26 16:22:44

标签: angularjs rest

我正在使用来自(class-CakeResponse.html)的AngularJS文件上传,并且它不能一直对同一个文件一直工作。不确定它是在AngularJS代码还是我的REST API代码中。

我的控制器代码 -

[Route("uploadFile")]
[HttpPost]
public void UploadFile()
{
    var httpPostedFile = HttpContext.Current.Request.Files["file"];
    var folderExists = Directory.Exists(HttpContext.Current.Server.MapPath("~/UploadedDocuments"));
    if (!folderExists)
        Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/UploadedDocuments"));
    if (httpPostedFile != null)
    {
        var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedDocuments"), httpPostedFile.FileName);
        httpPostedFile.SaveAs(fileSavePath);
    }
}

我的AngularJS控制器 -

var uploader = $scope.uploader = new FileUploader({
    url: apiUrl.serviceBase + "api/quotes/uploadFile"
});
uploader.onSuccessItem = function (fileItem) {
    $scope.uploader.queue = [];
    $scope.uploader.progress = 0;
    alert("Selected file has been uploaded successfully.");
    vm.file.fileName = fileItem.file.name;
    vm.file.originatedBy = vm.userName;
    vm.file.modifiedBy = vm.userName;
    vm.file.rfq = vm.rfq;
    quotesService.updateFile(vm.file).then(processSuccess, processError);
    $location.path("/quotes");
};

uploader.onErrorItem = function () {
    alert("We were unable to upload your file. Please try again.");
};

我的HTML代码 -

                <tbody>
                    <tr ng-repeat="item in uploader.queue">
                        <td><strong>{{ item.file.name }}</strong></td>
                        <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                        <td ng-show="uploader.isHTML5">
                            <div class="progress" style="margin-bottom: 0;">
                                <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                            </div>
                        </td>
                        <td class="text-center">
                            <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                            <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                            <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                        </td>
                        <td nowrap>
                            <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                <span class="glyphicon glyphicon-upload"></span> Upload
                            </button>
                            <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                            </button>
                            <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                <span class="glyphicon glyphicon-trash"></span> Remove
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

我不确定错误在哪里,有时它永远不会到达REST API。我正在测试的方式是尝试一遍又一遍地加载相同的文件。在调用saveas函数后,是否必须执行某些操作?

1 个答案:

答案 0 :(得分:1)

此建议太长,无法发表评论

这是位于here

的HttpPostFile类的源代码
public void SaveAs(String filename) {
            // VSWhidbey 82855
            if (!Path.IsPathRooted(filename)) {
                HttpRuntimeSection config = RuntimeConfig.GetConfig().HttpRuntime;
                if (config.RequireRootedSaveAsPath) {
                    throw new HttpException(SR.GetString(SR.SaveAs_requires_rooted_path, filename));
                }
            }

            FileStream f = new FileStream(filename, FileMode.Create);

            try {
                _stream.WriteTo(f);
                f.Flush();
            }
            finally {
                f.Close();
            }
        }

FileMode.Create - 创建一个新文件。如果该文件已存在,则会被覆盖。

所以基本上尝试自己使用FileStream,因为HttpPostFile奇怪地没有异常捕手/投掷者

[Route("uploadFile")]
[HttpPost]
public void UploadFile()
{
    try {
        var httpPostedFile = HttpContext.Current.Request.Files["file"];
        var folderExists = Directory.Exists(HttpContext.Current.Server.MapPath("~/UploadedDocuments"));
        if (!folderExists) Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/UploadedDocuments"));
        if (httpPostedFile != null)
        {
            var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedDocuments"), httpPostedFile.FileName);
            HttpInputStream _stream = new HttpInputStream();
            FileStream f = new FileStream(fileSavePath, FileMode.Create);

            _stream.WriteTo(f);
            f.Flush();
        }
        catch(Exception e){
            throw e;       
        }
        finally {
            f.Close();
        }
    }
}

注意:我在mac上,并且无法检查上面的代码,所以请注意