我正在尝试为从我的React应用程序上传的图像设置“Cloudinary”。

我的提交功能不断响应:“错误的网关502”和“SyntaxError:输入意外结束”。

我假设标题出现问题,但找不到问题...

handleFileSelect = (e) => {
    this.formValid()
      this.setState({
        picture: e.target.files[0] })
  }




submit(){

    const CLOUDINARY_URL=
    "https://api.cloudinary.com/v1_1/dvz27u2gu/image/upload"
    const CLOUDINARY_UPLOAD_PRESET= "jshvp3nh"


        const obj = Object.assign({}, this.state);
        const formData = new FormData();
        formData.append("file", obj.picture);
        formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET);

        fetch(CLOUDINARY_URL,{
          mode: 'no-cors',
          method:'post',
          headers: { "Content-Type": "application/x-www-form-urlencoded"},
          body:formData,
        })
        .then((res)=>{return res.json()})
        .then(data=>console.log(data))
        .catch(err=>console.log(err));
}

最佳答案

您可以尝试以下操作:

<div><input type="file" onChange={this.submit}/></div>


submit = (e) => {

    var file = e.target.files[0];
    var data = new FormData();
    data.append('upload_preset', 'jshvp3nh');
    data.append('file', file);
    data.append('cloud_name', 'dvz27u2gu');

    const config = {
        method: "POST",
        body: data
      };

     var imgurl = "https://api.cloudinary.com/v1_1/dvz27u2gu/raw/upload";
     fetch(imgurl, config)
        .then(responseData => {
           console.log('here');
           console.log(JSON.stringify(responseData, null, 4));
           console.log(responseData);
         })}

10-04 22:32
查看更多