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

【问题标题】：Dropzone JS Upload to WCF Getting Wrong DataDropzone JS 上传到 WCF 获取错误数据
【发布时间】：2016-08-01 08:59:21
【问题描述】：

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

例如，我用这个star image作为测试，通过将图片上传到base64 online converter，我可以看到base64字符串的开头是这样的：

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

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

LS0tLS0tV2ViS2l0Rm9ybUJvdW5kYXJ5T1RUV0I1RFZZdTVlM2NTNQ0KQ29udG...

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

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

索引.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>

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

【问题讨论】：

只要检查一下你的浏览器发送了什么数据，你就会知道是客户端问题还是服务器问题。
Chrome 显示正确的字符串，代表在网络选项卡中发送的 jpeg。在 WCF 服务中对变量 encodedData 进行中断会为每个图像显示相同的字符串。这不是服务器端的第一个变量，我可能应该检查 AddImageStream 函数的 Stream 变量的值，但我不确定如何在那里查看值。

标签： javascript c# image wcf

【解决方案1】：

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

我明白了

------WebKitFormBoundaryOTTWB5DVYu5e3cS5 Cont

所以我猜你在引用这篇文章中的元素时遇到了问题： Uploaded file only contains "WebKitFormBoundary"

【讨论】：

这只是我需要弄清楚“WebKitFormBoundary...”包装器包装的数据发生了什么的提示。
抱歉，Jehy，没有意识到我可以在不接受您的回答的情况下奖励赏金，我想为其他发现此问题的人提供更多详细信息。欣赏它。

【解决方案2】：

对于希望配置 WCF 服务以捕获 dropzone 图像的其他任何人，请注意 dropzone 发送的 multipart/form-data 如下所示：

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

<file bytes>
------WebKitFormBoundary--

我发现没有内置的方法来解析这些数据，但是这个blog post 提供了更多细节，并提供了一个非常适合这种情况的codeplex MultipartParser class。

现在简化的 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;
    }

【讨论】：