Question

我尝试使用Redux Form's file input来允许用户上传图片。我可以在表单中使用其余字段进行设置。传递给我的动作的jpg文件看起来像这样：

{
  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，或 S3 URL（列入白名单的存储桶）。

所以不要认为传下来的图像道具符合其中任何一个。

这是我的行动：

//...

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

我是否通过Redux表单正确处理此文件输入/ jpg上传？非常感谢任何和所有的帮助。谢谢！

Answer 1

我遇到了与axios相同的问题，并且无法找到关于该问题的任何答案，然后我转而使用superagent并且工作正常。

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

上传图片时Redux Form的文件输入的文件类型是什么？

1 个答案: