angularjs中的FileUpload

时间:2016-02-24 19:43:00

标签: c# file-upload angular-file-upload

我使用Here中的angular-file-upload。它适用于我需要的东西,但现在需求已经改变,我希望能够发送关于(对象)的附加数据以及文件。关于它的文档很多。根据我所看到的,当我使用options指令作为属性并将数据作为对象提供时,它未在FileUploader中的任何位置列出。另外,我的控制器在上传时给了我一个错误。我在Post中添加了一个Model类作为参数,这是导致控制器中断的原因。

    [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

那么,如何将多部分文件与其他数据一起发送?

2 个答案:

答案 0 :(得分:0)

此链接一定会对您有所帮助,我已经实现了这一点。 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(){
    });
}

}]);

答案 1 :(得分:0)

我自己想通了。这link帮了很多忙。事实证明,我没有做很多工作来提供额外的数据。我只需要提供formData作为请求体,在action中进行处理;控制器动作不带任何参数。我的代码的问题是(我想说由于角文件上传的文档不正确)我误解了formData是什么。原来,它是一系列对象。它必须是这样的:

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

});

这将数据作为请求主体发送到控制器操作。从那里,我只需要以provider.FormData["somename"];

的形式访问它