Wie lautet der Dateityp der Redux Form-Datei beim Hochladen von Bildern?

Question

Ich versuche Redux Form's file input zu verwenden, damit Benutzer Bilder hochladen können. Ich kann es mit dem Rest meiner Felder in meiner Form einrichten. Die jpg-Datei, die auf meine Handlungen übergeben wird in etwa so aussieht:

{ 
    userImages: { 
    value: [ 
     { 
     lastModified: 1467575553000, 
     lastModifiedDate: Sun Jul 03 2016 15:52:33 GMT-0400 (EDT), 
     name: "hero_bg.jpg", 
     size: 96826, 
     type : "image/jpeg", 
     webkitRelativePath: "" 
     } 
    ] 
    } 
} 

Ich verwende Cloudinary to post to their API und das Bild hochladen. Wenn ich jedoch userImages.value [0] als meine Datei übergebe, gibt es mir einen 400 fehlerhaften Anforderungsfehler zurück, der mich zu der Annahme verleitet, dass es ein Problem mit den übergebenen Dateiinformationen ist.

In der Cloudinary Dokumentation sie die folgenden Dateitypen akzeptieren:

Können die aktuellen Daten (Byte-Array-Puffer) sein, die Daten URI (Base64 codiert), eine Remote-FTP, HTTP oder HTTPS-URL eine vorhandene Datei oder eine S3-URL (eines Whitelist-Buckets).

Also denken Sie nicht, dass die Bildstütze, die überliefert wird, auf eines von diesen passt.

Hier ist meine Aktion:

//... 

export function putImage(props) { 

    console.log(props) 

    const cloudinaryURL = 'https://api.cloudinary.com/v1_1/<my_name_here>/image/upload'; 

    const image = 
    axios.post(cloudinaryURL, { 
     file: props, 
     upload_preset: 'test123' 
    }) 
    .then(function(response) { 
     console.log(response) 
    }) 
    .catch(function(error) { 
     console.log(error) 
    }) 

    return { 
    type: PUT_IMAGE, 
    payload: image, 
    } 
} 

Bin ich diese Datei Eingang eine korrekte Abwicklung/jpg durch Redux Formular hochladen? Jede und jede Hilfe wird sehr geschätzt. Vielen Dank!!

Answer 1

Ich hatte das gleiche Problem mit Axios und kann keine Antwort auf dieses Problem finden, dann wechselte ich auf Superagent und es funktioniert gut.

https://github.com/visionmedia/superagent

import request from 'superagent'; 

    let upload = request.post(CLOUDINARY.UPLOAD_URL) 
    .field('upload_preset', CLOUDINARY.UPLOAD_PRESET) 
    .field('file', file); // file to upload 

    upload.end((err, response) => { 
    if (err) { 
     console.error(err); // error handling 
    } 

    if (response.body.secure_url !== '') { 
     console.log(response.body.secure_url); // cloudinary image url 
    } 
    });