将文档上传到Web API

user3378165 发表于 Dev

用户名

第一步：在我的MVC项目中，我有一个Div，可以上传文件。

<div id="modalUpload" style="display:none">
    Select a file:
    <input id="upload" type="file" name="upload" /><br />
    Description:
    <input id="documentDescription" type="text" /><br />
    <input type="button" value="Submit" id="submitUpload" data-bind="click:function(){ $root.upload() }">
 </div>

第二步：在JavaScript中，我使用POST请求将文档上传到Web API ：（例如，使用XMLHttpRequest方法）

self.upload = function () {
        var file = document.getElementById("upload").files[0];
        var xhr = new XMLHttpRequest();
        xhr.open('post', "/API/document/addDocument/", true);
        xhr.send(file);
}

第三步：这是我在Web API上的addDocument函数，它需要一个Document对象，如下所示：

    [HttpPost]
    [Route("{controller}/addDocument")]
    public string Post([FromBody]Document doc)
    {
       .......
    }

我的问题是，如何将文档作为文档对象发布到API？是否可以设置POST数据的类型？

在我的JavaScript代码上，我有一个Document对象：

 var Document = function (data) {
      this.id = ko.observable(data.id);
      this.name= ko.observable(data.name);
      this.size= ko.observable(data.zise);
}

但是我不确定如何在它们之间建立连接。

当我尝试这个：

var file = new Document(document.getElementById("upload").files[0]);

我收到以下错误：

415（不受支持的媒体类型）

任何帮助将不胜感激。

用户名

最后，我没有将文档作为对象发送，这就是我最终要做的，

self.upload = function () {
    if (document.getElementById("upload").value != "") {
        var file = document.getElementById("upload").files[0];
        var filePath = "....";
        if (window.FormData !== undefined) {
            var data = new FormData();
            data.append("file", file);
            var encodedString = Base64.encode(filePath);

            $.ajax({
                type: "POST",
                url: "/API/document/upload/" + file.name + "/" + encodedString ,
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    console.log(result);
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).Message;
                    console.log(err);
                }
            });
        }
    }
}

这是我的API函数：

[HttpPost]
    [Route("{controller}/upload/{fileName}/{filePath}")]
    public async Task<HttpResponseMessage> UploadFile(string fileName, string filePath)
    {

        if (!Request.Content.IsMimeMultipartContent())
        {
            return Request.CreateErrorResponse(HttpStatusCode.UnsupportedMediaType, "The request doesn't contain valid content!");
        }
        byte[] data = Convert.FromBase64String(filePath);
        filePath = Encoding.UTF8.GetString(data);
        try
        {
            var provider = new MultipartMemoryStreamProvider();
            await Request.Content.ReadAsMultipartAsync(provider);
            foreach (var file in provider.Contents)
            {
                var dataStream = await file.ReadAsStreamAsync();
                // use the data stream to persist the data to the server (file system etc)
                using (var fileStream = File.Create(filePath + fileName))
                {
                    dataStream.Seek(0, SeekOrigin.Begin);
                    dataStream.CopyTo(fileStream);
                }
                var response = Request.CreateResponse(HttpStatusCode.OK);
                response.Content = new StringContent("Successful upload", Encoding.UTF8, "text/plain");
                response.Content.Headers.ContentType = new MediaTypeWithQualityHeaderValue(@"text/html");
                return response;
            }
            return Request.CreateResponse(HttpStatusCode.ExpectationFailed);
        }
        catch (Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e.Message);
        }
    }