2016-07-21 4 views
1

Я пытаюсь использовать Redux Form's file input, чтобы пользователи могли загружать изображения. Я могу настроить его с остальными полями в моей форме. Файл JPG, который получает передается на мои действия выглядит примерно так:Каков тип файла для ввода файла Redux Form при загрузке изображений?

{ 
    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: "" 
     } 
    ] 
    } 
} 

Я использую Cloudinary to post to their API и загрузить изображение. Однако, когда я передаю userImages.value [0] в качестве моего файла, он возвращает мне ошибку с плохим запросом 400, что заставляет меня думать, что это проблема с передаваемой информацией о файле.

В Cloudinary документации они принимают следующие типы файлов:

Может быть фактические данные (байт буфера массива), то URI данных (Base64 закодирован), удаленный FTP, HTTP или HTTPS URL из существующий файл или URL-адрес S3 (белого ведра).

Так что не думайте, что пропущенное изображение соответствует любому из них.

Вот мои действия:

//... 

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

Am Я правильно обработки этого файла ввода/JPG загрузки через Redux формы? Всем приветствуется всяческая помощь. Благодаря!!

+0

ты добиться успеха? –

ответ

0

У меня была такая же проблема с аксиомами и я не могу найти ответа на эту проблему, тогда я переключился на суперагент, и он отлично работает.

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