无法在 React 中使用 App.js 加载 Jpeg 图像文件

Question

在尝试使用以下代码将图像文件加载到 imgur 时，使用 React，运行遇到问题。该代码只是查找文件 test.jpeg，并使用 imgur 的 API 加载到 imgur。 App.js 启动时出现启动画面，因为它使用 (create-react-app) 但没有加载文件，代码如下：

class App extends Component {
  uploadImage() {
    var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

    const fd = new XMLHttpRequest();
    const Data = new FormData();
    const e = document.getElementsByClassName('Image');
    var t;

    Data.append("image", e);
    fd.open("POST", "https://api.imgur.com/3/image/");

    fd.setRequestHeader("Authorization", "Client ID XXXXSecret");
    fd.onreadystatechange = function() {
      if (fd.status === 200 && fd.readyState === 4) {
        let result = JSON.parse(fd.responseText);
        t = "https://i.imgur.com/${result.data.id}.png";

        const d = document.createElement("div");
        d.className = "image";
        document.getElementByTagName("body")[0].appendChild(d);
      }
    };

    fd.send(Data);
  }
 render() {
return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to React</h1>
    </header>
    <img src={Image} className="ImageFile" alt="Image"/>    
<p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  <button onClick={this.uploadImage} width="200" height="200">Button </button>
  <p></p>
  </div>
);
  }
}
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

这里有一些错误。

没有调用 uploadImage()，所以当然不会发生任何事情。
执行 Data.append("image", "test.jpeg"); 将添加一个名为 image 的字段，其中包含一个字符串负载 "test.jpeg"，而不是一个名为 test.jpeg.
如果您希望这是用户提供的图像，则必须使用 <input type="file"> 元素并从其 files 列表属性中捕获 File 对象.没有其他方法可以访问用户内容。

无法在 React 中使用 App.js 加载 Jpeg 图像文件

Unable to load Jpeg Image file using App.js in React

reactjs

create-react-app