使用WCF REST服务和Javascript中的Streams以及URL参数上载文件

时间:2014-07-14 13:29:26

标签: c# javascript wcf rest cors

我这里有一个WCF REST服务是实现

 [WebInvoke(Method = "POST",
            UriTemplate="uploadFile/{filename}/{email}",
            RequestFormat = WebMessageFormat.Json,
            ResponseFormat = WebMessageFormat.Json)]
 [OperationContract]
 string uploadFile(string filename, string email, Stream _Stream)


  public string uploadFile(string filename, string email, Stream _Stream )
  {
    // Code to save file with the given filename    
  }

Javascript实现上传文件

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<title></title>
<script type="text/javascript">

    function uploadBlobOrFile(blobOrFile) {

        alert("upload called123");
        alert(blobOrFile.size);

        var xhr = new XMLHttpRequest();

        var url = https://localhost/Myservice/service.svc/upload/filename/emailid ;

        xhr.open('POST', url , false);

        xhr.onload = function (e) {
            progressBar.value = 0;
            progressBar.textContent = progressBar.value;
        };

        // Listen to the upload progress.
        var progressBar = document.querySelector('progress');
        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                progressBar.value = (e.loaded / e.total) * 100;
                progressBar.textContent = progressBar.value; // Fallback.
            }
        };
        xhr.onreadystatechange = function () {
        alert(xhr.status + "   result: " + xhr.responseText);
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        }; 

        xhr.send(blobOrFile);
    }

</script>
</head>
<body>
<input id="filePicker" type="file" name="Package" accept="image/*"/>
<br />
<progress min="0" max="100" value="0">0% complete</progress>
<br />
<button title="upload" 
        onclick="if (filePicker.files[0]) uploadBlobOrFile(filePicker.files[0])">
    <span>Upload</span>
</button>
</body>
</html> 

从上面的实现我有一个问题,我无法发布大小为50MB的图像

并且用于相同的实现 如果我将javascript中的url更改为有效的ip地址,而不是localhost

  var url = https://192.168.0.50/Myservice/service.svc/upload/filename/emailid ;

该服务根本没有调用,并且给我一条错误消息,说明405错误代码。 (注意:我已经在我的服务上启用了CORS。并且所有其他服务方法都运行良好且良好)。

我的代码可能会出现什么问题。

由于

这是我的web.config文件

<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
<httpRuntime maxQueryStringLength="2097150"
             maxRequestLength="2097150"
             maxUrlLength="2097150"    />
<authentication mode="None"/>
<authorization>
  <allow users="*"/>
</authorization>
</system.web>

<system.serviceModel>
<bindings>
  <webHttpBinding>
    <binding name="webHttpBindingClient"
             closeTimeout="00:50:00"
             openTimeout="00:50:00"
             receiveTimeout="00:50:50"
             sendTimeout="00:50:00"
             allowCookies="false"
             bypassProxyOnLocal="false"
             hostNameComparisonMode="StrongWildcard"
             maxBufferSize="2147483647"
             maxBufferPoolSize="2147483647"
             maxReceivedMessageSize="2147483647"
             transferMode="Streamed"
             useDefaultWebProxy="true"
             crossDomainScriptAccessEnabled="true">

      <readerQuotas maxArrayLength="2147483647"
                    maxStringContentLength="2147483647"
                    maxDepth="2147483647"
                    maxBytesPerRead="2147483647" 
                    maxNameTableCharCount="2147483647" />
      <security mode="Transport"/>
    </binding>
  </webHttpBinding>
</bindings>
<services>
  <service behaviorConfiguration="ServiceBehaviour" name="Service">
    <endpoint address="" behaviorConfiguration="EndpBehaviour" binding="webHttpBinding" 
      bindingConfiguration="webHttpBindingClient" name="webHttpEndPointBinding"   
      contract="IService"/>
  </service>
</services>
<behaviors>
  <serviceBehaviors>
    <behavior name="ServiceBehaviour">
      <serviceMetadata httpsGetEnabled="true"/>
      <serviceDebug includeExceptionDetailInFaults="true"/>
    </behavior>
  </serviceBehaviors>
  <endpointBehaviors>
    <behavior name="EndpBehaviour">
      <webHttp helpEnabled="true"/>
    </behavior>
  </endpointBehaviors>
</behaviors>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"     
                             multipleSiteBindingsEnabled="true"/>
<standardEndpoints>
  <webHttpEndpoint>
    <standardEndpoint crossDomainScriptAccessEnabled="true"/>
  </webHttpEndpoint>
  <webScriptEndpoint>
    <standardEndpoint crossDomainScriptAccessEnabled="true"/>
  </webScriptEndpoint>
</standardEndpoints>
</system.serviceModel>
<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
    <add name="Access-Control-Allow-Credentials" value="true"/>
    <add name="Access-Control-Allow-Methods" value="POST, GET,OPTIONS"/>
    <add name="Access-Control-Max-Age" value="600000"/>
    <add name="Access-Control-Allow-Headers" value="content-type,Accept"/>
    <add name="Content-Type" value="application/json;charset=UTF-8"/>
    <add name="Allow" value="OPTIONS, TRACE, GET, HEAD, POST"/>
  </customHeaders>
</httpProtocol>
<security>
  <requestFiltering>
    <requestLimits maxAllowedContentLength="20971520"  />
  </requestFiltering>
</security>
<modules runAllManagedModulesForAllRequests="true" />
</system.webServer>
</configuration>

1 个答案:

答案 0 :(得分:1)

这不是与最大上传大小相关的问题吗?

 <system.web>
    <httpRuntime executionTimeout="240" maxRequestLength="20480" />
  </system.web>