Dropzone JS上传到WCF获取错误数据

本文关键字：WCF 获取 错误数据 JS Dropzone | 更新日期: 2023-09-27 17:59:23

首先，我对WCF服务和dropzone JS都是新手，但我正试图将两者结合起来创建一个简单的图像上传器。我已经让WCF正确地处理了我通过它上传到的元数据（所以我知道它正在正确地跨域传递信息），但我从Dropzone捕获的流与我丢弃的图像不匹配。事实上，丢弃的每一个图像都会在服务器端产生相同的编码字符串。。。

例如，我使用了这个星形图像作为测试，通过将图像上传到base64在线转换器，我可以看到base64字符串的开头如下所示：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAADbCAMAAABOUB36AAAAwFBMVEX...

然而，当我调试WCF代码时，base64转换后的字符串如下所示：

LS0tLS0tV2ViS2l0Rm9ybUJvdW5kYXJ5T1RUV0I1RFZZdTVlM2NTNQ0KQ29udG...

上面的这个字符串与为我尝试发送的每个图像创建的字符串相同

现在，针对所有适用的代码段。我在一个项目中有一个简单的网页，在同一解决方案的另一个项目上有WCF相关的文件。

Index.html：

<div class="col-lg-12">
    <form action="http://localhost:39194/ImageRESTService.svc/AddImageStream/"
            class="dropzone"
            id="dropzone"></form>
</div>
...
Dropzone.options.dropzone = {
        maxFilesize: 10, // MB
    };

运营合同：

/*  Stores a new image in the repository  */
    [OperationContract]
    [WebInvoke(Method = "POST",
                ResponseFormat = WebMessageFormat.Json,
                UriTemplate = "AddImageStream/")]
    void AddImageStream(Stream img);

AddImageStream实现：

public void AddImageStream(Stream img)
    {
        //try to save image to database  
        byte[] buffer = new byte[10000];
        int bytesRead, totalBytesRead = 0;
        string encodedData = "";
        do
        {
            bytesRead = img.Read(buffer, 0, buffer.Length);
            encodedData = encodedData + Convert.ToBase64String(buffer,
                                       Base64FormattingOptions.InsertLineBreaks);
            totalBytesRead += bytesRead;
        } while (bytesRead > 0);
}

Webconfig适用件：

<services>
  <service name="ImageRESTService.ImageRESTService" behaviorConfiguration="serviceBehavior">
    <endpoint address="" behaviorConfiguration="web" contract="ImageRESTService.IImageRESTService" binding="webHttpBinding" bindingConfiguration="webHttpBinding"></endpoint>
  </service>
</services>
<behaviors>
  <serviceBehaviors>
    <behavior name="serviceBehavior">
      <serviceMetadata httpGetEnabled="false" />
      <serviceDebug includeExceptionDetailInFaults="false" />
    </behavior>
  </serviceBehaviors>
  <endpointBehaviors>
    <behavior name="web">
      <webHttp />
    </behavior>
  </endpointBehaviors>
</behaviors>
<standardEndpoints>
  <webHttpEndpoint>
    <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="true" maxReceivedMessageSize="2147000000" />
  </webHttpEndpoint>
</standardEndpoints>
<bindings>
  <webHttpBinding>
    <binding crossDomainScriptAccessEnabled="true" name="ImagesBinding" closeTimeout="00:10:00" openTimeout="00:10:00" receiveTimeout="00:10:00" sendTimeout="00:10:00" maxBufferSize="2147483647" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" />
    <binding name="webHttpBinding" transferMode="Streamed" maxReceivedMessageSize="2147483647" maxBufferSize="10485760" closeTimeout="00:01:00" openTimeout="00:01:00"
         receiveTimeout="00:10:00" sendTimeout="00:01:00">
      <readerQuotas maxStringContentLength="2147483647" maxArrayLength="1000000" />
    </binding>
  </webHttpBinding>

当我打断encodeString片段时，问题就显而易见了，而且它与我预期的不匹配。如果我将整个字符串复制到另一个从base64字符串生成图像的在线图像中，则它不是有效的图像。在这一点上，我被卡住了，还不能确定为什么我不能从dropzone阅读。

Dropzone JS上传到WCF获取错误数据

如果我解码您收到的base64字符串LS0tLS0tV2ViS2l0Rm9ybUJvdW5kYXJ5T1RUV0I1RFZZdTVlM2NTNQ0KQ29udG

我得到

------WebKitFormBoundaryOTTWB5DVYu5e3cS5 Cont

所以我想你在引用这个帖子中的元素时有一个问题：上传的文件只包含"；WebKitFormBoundary"；

对于其他想要配置WCF服务以捕获dropzone映像的人，请注意dropzone发送的多部分/表单数据看起来像：

------WebKitFormBoundary
Content-Disposition: form-data; name="data"; filename="DSCF0001.JPG"
Content-Type: image/jpeg
<file bytes>
------WebKitFormBoundary--

我发现没有一种内置的方法来解析这些数据，但这篇博客文章深入了解了更多细节，并提供了一个codeplex MultipartParser类，它非常适合这种情况。

简化的WCF代码现在看起来像：

public string AddImageStream(Stream img)
    {
        MultipartParser parser = new MultipartParser(img);
        string encodedString = "";
        if (parser.Success)
        {
            // Save the file
            encodedString = SaveFile(parser.Filename, parser.ContentType, parser.FileContents);
        }
        return encodedString;
    }
相关文章：