我的提交功能以 Bad Gateway 502 响应

Posted 2023-03-25

【中文标题】我的提交功能以 Bad Gateway 502 响应

【英文标题】：My submit function responds with Bad Gateway 502

【发布时间】：2019-07-05 08:01:50

【问题描述】：

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

我的提交函数一直响应：“Bad Gateway 502”和“SyntaxError: Unexpected end of input”。

我假设我的标题有问题，但我找不到问题...

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

【问题讨论】：

我可能是他们这边的问题：support.cloudinary.com/hc/en-us/community/posts/…

那个具体问题四年前就解决了，所以如果是服务器端的问题，可能就不完全一样了

【参考方案1】：

您可以尝试以下方法：

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

【讨论】：

感谢您的帮助，我解决了这个问题，我的标头有问题，我没有按我应该的方式设置 cloudinary 的凭据。

【参考方案2】：

这对我来说是这样的。

    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("api_key", "xx")
        formData.append("api_secret", "xx")
        formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET); 
        formData.append("timestamp", (Date.now() / 1000) | 0);


        fetch(CLOUDINARY_URL,
            method:'POST',
            body: formData,
            
        )
        .then((res)=>return res.json())
        .then((data)=>
            obj.img_url_cloudinary=data.secure_url; 
            this.sendForm(obj);
        ).catch(err=>console.log(err));;