尝试将图像发布到Cloudinary时,我始终收到错误请求错误

时间:2018-12-14 16:00:19

标签: javascript node.js reactjs cloudinary

我正在尝试使用axiosreact将图像上传到cloudinary。我有两个功能。一个用于附加formData,另一个用于发出请求

// APPEND CLOUDINARY DETAILS
export function appendCloudinaryDetails(fileUrl){
  let formData = new FormData();
  formData.append("api_key", 'APIKEYHERE');
  formData.append("api_secret", 'APISECRETHERE');
  formData.append("file", 'fileUrl');
  formData.append("cloud_name", fileUrl);
  formData.append("upload_preset", "rhi2i6xg");    
  return formData;
}

// STORE THE DATA ON CLOUDINARY
export function storeOnCloudinary(formData){
  return () => {
    return axios.post("https://api.cloudinary.com/v1_1/my-company/image/upload", formData,{
      headers: { "X-Requested-With": "XMLHttpRequest", "Allow-Control-Allow-Origin": "*" },
    });
  }
}

这就是我的使用方式:

// Append Cloudinary Details
let formData = appendCloudinaryDetails(this.state.backdropCroppedImageUrl);

// Store the backdrop on Cloudinary
this.props.storeOnCloudinary(formData).then(
   response => {
     ...
   }
);

但是运行此命令会给我一个400错误响应。如下图所示:

enter image description here

1 个答案:

答案 0 :(得分:1)

我不知道这是否是您代码的忠实副本,或者为了在发布的问题中隐藏敏感信息而对其进行了更改,但是据此,您将backdropCroppedImageUrl附加到formData上作为“ cloud_name”而不是将其设置在“ file”上,而在“ file”中则设置了一个字符串。