angularjs 中的文件上传

Question

我正在使用 angular-file-upload，如 Here 中所见。它可以满足我的需要，但现在需求发生了变化，我希望能够随文件一起发送有关（对象）的其他数据。没有太多关于它的文档。据我所知，当我使用 options 指令作为属性并将数据作为对象提供时，它没有在 FileUploader 中的任何地方列出。另外，我的控制器在我上传时给我一个错误。我在 Post 中添加了一个模型 class 作为参数，这就是导致控制器中断的原因。

    [HttpPost]

    public Task<HttpResponseMessage> PostFile(QAFileAttribute QAFile)
    {
        this.QAFile = QAFile;
        string newLocation = GetCurrentUploadDirectory();

        HttpRequestMessage request = this.Request;
        if(!request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        string root = UploadLocation; //newLocation;

        var provider = new MultipartFormDataStreamProvider(root);

        var task = request.Content.ReadAsMultipartAsync(provider)
            .ContinueWith<HttpResponseMessage>(o =>
            {
                if (o.IsFaulted || o.IsCanceled)
                {
                    Request.CreateErrorResponse(HttpStatusCode.InternalServerError, o.Exception);
                }

                foreach (MultipartFileData file in provider.FileData)
                {
                    if(String.IsNullOrEmpty(file.Headers.ContentDisposition.FileName))
                    {
                        return Request.CreateResponse(HttpStatusCode.NotAcceptable, "Filename is not acceptable.");
                    }

                    UploadFile(file, QAFile);                        
                }

                return Request.CreateResponse(HttpStatusCode.OK);
            });

        return task;
    }// end Post

那么，如何发送包含多个部分的文件以及其他数据？

Answer 1

这个link一定能帮到你，我已经实现了。 https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, additional, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);

    $.each(additional, function(obj) {
         fd.append(obj.key,obj.value);
    });
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
    })
    .error(function(){
    });
}

}]);

Answer 2

我自己想出来了。这 link 帮了大忙。事实证明，我不需要做很多事情来提供额外的数据。我只需要提供 formData 作为要在操作中处理的请求主体；控制器动作不带任何参数。我的代码的问题是（我想说由于 angular-file-upload 的文档不正确）我误解了 formData 是什么。原来，它是对象数组。它需要像这样：

var uploader = new FileUploader({
  url: 'api/upload',
  formData: [{...}]

});

这将数据作为请求正文发送到控制器操作。从那里，我只需要访问它作为 provider.FormData["somename"];

angularjs 中的文件上传

FileUpload in angularjs

c#

file-upload

angular-file-upload