Dropzone JS Upload zu WCF Falsche Daten

Question

Zunächst einmal bin ich neu in WCF-Dienste und Dropzone JS, aber ich versuche, die beiden zu kombinieren, um einen einfachen Bild-Uploader zu erstellen. Ich habe meine WCF funktioniert ordnungsgemäß für die Metadaten, die ich durch es hochgeladen habe (so weiß ich, dass es Dinge domainübergreifend korrekt passiert), aber der Stream, den ich von Dropzone erfasst habe, stimmt nicht mit dem Bild überein, das ich fallen gelassen habe . In der Tat, jedes einzelne Bild fallen in der gleichen codierten Zeichenfolge Server-Seite ...

Zum Beispiel habe ich diese star image als Test verwendet, und durch das Hochladen des Bildes auf eine base64 online converter, kann ich das sehen der base64-String beginnend sieht wie folgt aus:

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

Allerdings, wenn ich meine WCF-Code debuggen, die Zeichenfolge konvertiert base64 wie folgt aussieht:

LS0tLS0tV2ViS2l0Rm9ybUJvdW5kYXJ5T1RUV0I1RFZZdTVlM2NTNQ0KQ29udG... 

diese Saite über die gleiche für geschaffen ist für immer y Bild, das ich versuche zu senden.

Also jetzt für alle anwendbaren Codestücke. Ich habe eine einfache Webseite in einem Projekt und die WCF-bezogenen Dateien in einem anderen Projekt in derselben Lösung.

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 
    }; 

Operation:

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

AddImageStream Umsetzung:

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 anwendbar Stücke:

<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> 

Das Problem ist sichtbar, wenn ich auf dem codierten String Stück brechen und es nicht übereinstimmt, was ich erwarte. Wenn ich die gesamte Zeichenfolge in ein anderes Online-Bild kopiere, das Bilder aus base64-Strings erzeugt, ist das kein gültiges Bild. An diesem Punkt bin ich fest und konnte nicht feststellen, warum ich nicht aus der Dropzone lesen kann.

Answer 1

Für Jeder, der einen WCF-Dienst zum Abfangen von Dropzone-Images konfigurieren möchte, sollte beachten, dass Dropzone Multipart-/Formulardaten sendet, die wie folgt aussehen:

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

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

Es gibt keine integrierte Möglichkeit, diese Daten zu analysieren, die ich gefunden, aber diese blog post geht mehr ins Detail und bietet eine codeplex MultipartParser class, die perfekt für dieses Szenario gearbeitet.

Simplified WCF-Code sieht jetzt aus wie:

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; 
    } 

Answer 2

Wenn ich Ihre empfangenen base64 String dekodieren LS0tLS0tV2ViS2l0Rm9ybUJvdW5kYXJ5T1RUV0I1RFZZdTVlM2NTNQ0KQ29udG

ich

------WebKitFormBoundaryOTTWB5DVYu5e3cS5 Cont

Also denke ich, dass Sie ein Problem haben wie in Referenzierung Element in diesem Beitrag: Uploaded file only contains "WebKitFormBoundary"