MERN + Cloudinary: неподдерживаемый исходный URL

Question

Я пытаюсь загрузить файл в cloudinary . Вот часть моего реагирующего компонента

...
addItem() {
    ...
    let file = this.fileInput.value;
    keywords !== "" && this.props.onAddItem(keywords, place, image);
    ...
  }
  render() {
    return (
      ....
      <Input
      type="file"
      innerRef={(input) => {this.fileInput = input}}
      name="image"
      id="image"
      placeholder=""/>
    )
  }

Вот файл действий :

export function onAddItem(keywords, place, file, id, isChangebale = false) {
  return (dispatch) => {
    axios.all([
      axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
        {upload_preset: "mypresetname", file: file}),
      axios.post('http://localhost:3001/api/items/', { keywords, place, id, isChangebale })
    ])
    .then(axios.spread((cloudinaryRes, localRes) => {
      console.log(cloudinaryRes, localRes);
    }))

Я получаю сообщение об ошибке xhr.js:178 POST https://api.cloudinary.com/v1_1/testovich/image/upload 400 (Bad Request) и в заголовках ответа "X-Cld-Error: Unsupported source URL: C:\fakepath\2017-12-07_19-06-445.png"

Когда я тестирую с использованием почтальон У меня правильный ответ.

Похоже, я что-то не так делаю, когда передаю файл из прямоугольного компонента в файл действий. Как передать правильный путь / файл в облачный сервис?

Answer 1

Преобразование изображения в base64, как const base64Img = data:image/jpg;base64,${file.data}; file.data представляет свойство данных из ответа от средства выбора изображений. Затем я передал base64Img к данным, как return RNFetchBlob.fetch('POST', apiUrl, headerProps, [ { name: 'file', fileName: file.fileName, type: file.type, data: base64Img } ]); Надеюсь, это поможет.

Answer 2

Были две ошибки: 1. в реактивном компоненте должно быть

let file = this.fileInput.files[0];//I upload only one file

вместо

let file = this.fileInput.value;

2. в файле действий

   функция экспорта onAddItem (ключевые слова, место, изображение, идентификатор, isChangebale = false) { const formData = new FormData (); formData.append ("файл", изображение); formData.append ("upload_preset", "mypresetname");

   возврат (отправка) => { axios.all ([ // AJAX-запрос на загрузку с использованием Axios) axios.post ( 'https://api.cloudinary.com/v1_1/myservername/image/upload', FormData

вместо:

export function onAddItem(keywords, place, file, id, isChangebale = false) {
  return (dispatch) => {
    axios.all([
      axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
        {upload_preset: "mypresetname", file: file}),