Amplifyjs发布formData

Question

我是web开发的新手，我在将文件保存到数据库时遇到了问题。我使用MVC 4，knockoutjs 2.3.0，jquery 2.03和amplifyjs 1.1.0。

下面是我希望如何完成的。

在我上传的网页我有一个表格：

<form id="uploadForm" name="uploadForm" action="~/Administration/UploadReports"  method="post" enctype="multipart/form-data"> 
    <input required type="file" name="fileToUpload" id="fileToUpload" accept="html, image/jpeg"> 
     <input type="submit" data-bind="click:submit" value="Ladda upp fil" /> 
     <input type="reset" value="Avbryt" /> 
    </form> 

然后在我的knockoutViewModel我有下面的代码：

this.submit = function (model, element) { 
       var test = $('#uploadForm')[0]; 
       var formData = new FormData(test); 

       amplify.request({ 
        resourceId: "uploadReport", 
        success:() => { 
         console.log("success"); 
        }, 
        error:() => { 
         console.log("error"); 
        }, 
        data: formData 
       });     
      }; 

到目前为止一切工作正常。当我按下表格中的按钮时，我最终在这里。但我认为amplifyjs是做一些与我的数据形... Amplify.request是如下定义：

amplify.request.define('uploadReport', 'AJAX', { 
    url: '/Administration/UploadReports', 
    type: 'POST', 
    contentType: false, 
    processData: false, 
    cache: false 
}); 

而且在我的控制器，它看起来是这样的：

[HttpPost] 
    public ActionResult UploadReports(HttpPostedFileBase fileToUpload) 
    { 

     //Update the list of files 
     var model = new AdministrationViewModel(); 

     byte[] result; 

     using (var streamReader = new MemoryStream()) 
     { 
      fileToUpload.InputStream.CopyTo(streamReader); 
      result = streamReader.ToArray(); 
     } 

     model.BetFiles = FileInserter.InsertFile(fileToUpload.FileName, fileToUpload.ContentType, fileToUpload.ContentLength, result).Value; 


     return View("Reports", model); 
    } 

谁能帮我看看问题是什么？

的问候，大卫

---

这里是我所得到的：

而这正是我期望能获得：

Answer 1

如果我改变我的knockou中的this.submit函数t viewmodel它下面的代码工作，因为它应该，但我想用放大得到这个。

this.submit = function (model, element) { 
       var test = $('#uploadForm')[0]; 

       var formURL = formObj.attr("action"); 
       var formData = new FormData(test); 

       $.ajax({ 
        url: formURL, 
        type: 'POST', 
        data: formData, 
        mimeType: "multipart/form-data", 
        contentType: false, 
        cache: false, 
        processData: false, 
        success: function (data, textStatus, jqXHR) { 

        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
        } 
       }); 

      }; 

当然，在我的控制方法和我应该返回：

return Json(model.BetFiles); 

取而代之的景色。

Answer 2

当前amplify.js不支持版本1.1.2中的FormData。

检查这个问题 https://github.com/appendto/amplify/issues/107

可能的解决方案是修改库在此事件订阅

amplify.subscribe("request.ajax.preprocess", function(defnSettings, settings, ajaxSettings) { 
     var mappedKeys = [], 
      data = ajaxSettings.data; 

     if (typeof data === "string" || Object.prototype.toString.call(data) === "[object FormData]") { 
      return; 
     } 
......(omited) 
)} 

这样放大，如果是一个本地FORMDATA对象将忽略传递的对象。请求定义中的设置必须包含以避免jQuery与您的FormData对象再次混淆

contentType: false 
cache: false 
processData: false