MERN+ Cloudinary：不支持的源 URL答案

【问题标题】：MERN+ Cloudinary: Unsupported source URLMERN+ Cloudinary：不支持的源 URL
【发布时间】：2018-12-14 20:26:20
【问题描述】：

我正在尝试将文件上传到cloudinary。这是我的 react 组件

的一部分

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

当我使用postman 进行测试时，我得到了正确的响应。

所以看起来我在将文件从 rect 组件传递到操作文件时做错了。如何将正确的路径/文件传递给 cloudinary？

【问题讨论】：

标签： reactjs express axios cloudinary

【解决方案1】：

有两个错误： 1.在react组件中应该有

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

而不是

let file = this.fileInput.value;

在行动文件中

导出函数 onAddItem(keywords, place, image, id, isChangebale = false) { 常量 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', 表单数据，

代替：

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

【讨论】：

【解决方案2】：

将图像转换为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 } ]); 希望对您有所帮助。

【讨论】：