使用Knockout.js和Ajax上傳附件

Question

我無法將附件保存到我的MVC 4 vb網站中。 我能夠獲得一個media-type文件，該文件通過AJAX調用發送到我的控制器，但是我不知道如何使用該文件類型保存或轉換為HttpPostedFileBase 。

上載.docx時收到的錯誤是：

"No MediaTypeFormatter is available to read an object of type 'HttpPostedFileBase' from content with media type 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'."

這是我的html代碼的一個片段：

<input id="files" name="files" class="input-file" type="file" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary">

這是我的ko.bindinghandler：

ko.bindingHandlers.file = {
    init: function (element, valueAccessor) {
        $(element).change(function () {
            var file = this.files[0];
            if (ko.isObservable(valueAccessor())) {
                valueAccessor()(file);
            }
        });
    },

    update: function (element, valueAccessor, allBindingsAccessor) {
        var file = ko.utils.unwrapObservable(valueAccessor());
        var bindings = allBindingsAccessor();

        if (bindings.fileObjectURL && ko.isObservable(bindings.fileObjectURL)) {
            var oldUrl = bindings.fileObjectURL();
            if (oldUrl) {
                windowURL.revokeObjectURL(oldUrl);
            }
            bindings.fileObjectURL(file && windowURL.createObjectURL(file));
        }

        if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) {
            if (!file) {
                bindings.fileBinaryData(null);
            } else {
                var reader = new FileReader();
                reader.onload = function (e) {
                    bindings.fileBinaryData(e.target.result);
                };
                reader.readAsArrayBuffer(file);
            }
        }
    }
};

這是AJAX調用：

var fileData = monthView.imageFile();
$.ajax({
    type: 'POST',
    url: "/api/Upload/FileUpload",
    data: fileData,
    async: false,
    cache: false,
    processData: false,
    contentType: false, 
    success: function (data) {
        console.log(data);
        imageFile(getNameFromPath(monthView.imageFile()));
    },
});    

最后，這里是處理ajax調用的控制器：

<System.Web.Mvc.HttpPost>
Public Function FileUpload(ByVal file As HttpPostedFileBase) As Boolean
    Dim fileName As String
    Dim pathName As String

    If file.ContentLength > 0 Then
        fileName = Path.GetFileName(file.FileName)
        pathName = Path.Combine(HttpContext.Current.Server.MapPath("~/App_Data/uploads"), fileName)
        file.SaveAs(pathName)
        Return True
    End If
    Return False
End Function

Answer 1

我不知道后端，但是您可能想要嘗試創建FileData（）對象，然后創建.append（'file'，monthView.imageFile（））：

var fileData = new FileData();
fileData.append('file', monthView.imageFile());

這似乎是帶有自定義數據的ajax調用的HTML5標准。

祝你有美好的一天