【问题标题】:How to fix Uncaught (in promise) SyntaxError: Unexpected end of JSON input?如何修复 Uncaught (in promise) SyntaxError: Unexpected end of JSON input?
【发布时间】:2019-09-19 10:17:12
【问题描述】:

所以我想使用 React 将文件上传到 Cloudinary,但我在 let json = await res.json(); 行中得到了一个 Upload.js:22 Uncaught (in promise) SyntaxError: Unexpected end of JSON input。我该如何解决这个问题?

class Upload extends React.Component {
  processFile = async e => {
    var file = e.target.files[0];
    var formdata = new FormData();

    formdata.append("file", file);
    formdata.append("cloud_name", "dvrmt2oir");
    formdata.append("upload_preset", "wco0c7sr");

    let res = await fetch(
      "https://api.cloudinary.com/v1_1/dvrmt2oir/image/upload",
      {
        method: "post",
        mode: "cors",
        body: formdata
      }
    );

    let json = await res.json();
    console.log(JSON.stringify(json.secure_url));
  };

  render() {
    return (
      <div>
        <h3>Upload</h3>
        <input type="file" onChange={this.processFile} />
      </div>
    );
  }
}

【问题讨论】:

    标签: reactjs post file-upload form-data cloudinary


    【解决方案1】:

    我尝试使用以下代码:

    
    import React from "react";
    import ReactDOM from "react-dom";
    
    import "./styles.css";
    
    class Upload extends React.Component {
      processFile = async e => {
        var file = e.target.files[0];
        var formdata = new FormData();
    
        formdata.append("file", file);
        formdata.append("cloud_name", "dvrmt2oir");
        formdata.append("upload_preset", "wco0c7sr");
    
        let res = await fetch(
          "https://api.cloudinary.com/v1_1/dvrmt2oir/image/upload",
          {
            method: "post",
            mode: "cors",
            body: formdata
          }
        );
    
        let json = await res.json();
        console.log(JSON.stringify(json.secure_url));
      };
    
      render() {
        return (
          <div>
            <h3>Upload</h3>
            <input type="file" onChange={this.processFile} />
          </div>
        );
      }
    }
    ReactDOM.render(<Upload />, document.getElementById("container"));
    

    它奏效了。您能否提供您尝试上传的图片?

    【讨论】:

      猜你喜欢
      • 2018-02-19
      • 2021-11-06
      • 2019-08-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-11-21
      • 2021-08-23
      • 2021-09-21
      相关资源
      最近更新 更多