Question

我一直在搜索如何将特定图片的文件上传到网络API动作。这是我第一次接触单页应用程序。基本上我正在尝试的是使用knockout我创建了一个自定义绑定，它对base 64中的文件进行编码并将其放入视图模型属性中。

之后使用knockout提交绑定我正在捕获表单并创建一个FormData对象并附加文件，我尝试使用Ajax，现在我正在尝试使用XMLHTTPRequest对象将数据发送到服务器端。

问题是请求的内容对服务器端来说是空的，当我看到浏览器（Chrome）发送的请求时，图像被附加到有效负载请求。对此事的任何帮助都将不胜感激。

感谢。这是带有用于文件上传的淘汰赛自定义绑定的HTML

<form role="form" class="form-horizontal" method="post" enctype="multipart/form-data" data-bind="submit: upload">
  <div class="col-sm-9">
    <div class="input-group">
      <span class="input-group-btn">
        <span class="btn btn-default side-btn btn-file">
          <span class="camera-icon no-decoration"></span>
          <input id="fileUpload" type="file" data-bind="file: trial.picture, fileObjectURL: trial.pictureUrl, fileDataUrl: trial.pictureData">
        </span>
      </span>
      <input type="text" class="form-control" disabled placeholder="Trial picture" value="{{trial.pictureUrl}}">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12">
      <button class="btn btn-primary btn-large center-block" type="submit">Add</button>
    </div>
  </div>
</form>

查看模型

self.upload = function () {
  var formData = new FormData();
  formData.append("picture", self.trial.pictureData);
  trialsService.upload(formData);
}

调用Web API功能的服务，我尝试了两种方法，即评论的方法和使用XMLHttpRequest的方法

upload = function (FormData) {
  var url = common.configuration.apiBaseUrl + 'upload/upload-file';
  //return common.wrapDataEvents(http.post, url, form);
  var request = new XMLHttpRequest();
  request.open("post", url);
  request.send(FormData);

  //$.ajax({
  //    type: "POST",
  //    url: url,
  //    contentType: false,
  //    processData: false,
  //    data: data,
  //    success: function (res) {
  //        //do something with our ressponse
  //        console.log("Uploaded");
  //    }
  //});
};

这是Web API方面的代码

public void Post()
{
  if (Request.Content.IsMimeMultipartContent())
  {
    var streamProvider = new MultipartFormDataStreamProvider("c:/uploads/");
    var task = Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t =>
      {
        if (t.IsFaulted || t.IsCanceled)
            throw new HttpResponseException(HttpStatusCode.InternalServerError);
      });

  }
  else
  {
    throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "This request is not properly formatted"));
  }
}

浏览器发送的请求（Chrome）

Remote Address:127.0.0.1:8888
Request URL:http://localhost:59704/api/upload/upload-file
Request Method:POST
Status Code:200 OK
Response Headers
view source
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:14
Content-Type:text/plain; charset=utf-8
Date:Fri, 03 Apr 2015 12:42:55 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
Vary:Accept-Encoding
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpcRGV2ZWxvcG1lbnRcU2FtQ2xvdWRcU0FNQ2xvdWQuV2ViU2VydmljZVxhcGlcdXBsb2FkXHVwbG9hZC1maWxl?=
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,es;q=0.6,it;q=0.4
Cache-Control:no-cache
Content-Length:808013
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryL75dJpHubJiMYGnC
Host:localhost:59704
Origin:http://localhost:49921
Pragma:no-cache
Proxy-Connection:keep-alive
Referer:http://localhost:49921/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36
Request Payload
------WebKitFormBoundaryL75dJpHubJiMYGnC
Content-Disposition: form-data; name="picture"

---Picture's data encoded in base 64. omitted for brevity

将AJAX文件上传到Web API时缺少请求参数

0 个答案: