Невозможно загрузить файл изображения Jpeg с помощью App.js в React

Question

При попытке использовать следующий код для загрузки файла изображения в imgur, используя React, возникли проблемы. Код просто ищет файл test.jpeg и загружается в imgur с помощью API imgur. App.js запускается с заставкой, так как он использует (create-реагировать-приложение), но файл не загружен, код такой, как показано ниже:

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

Здесь несколько вещей не так.

1. Ничто не вызывает uploadImage(), поэтому, конечно, ничего не произойдет.
2. Выполнение Data.append("image", "test.jpeg"); добавит поле с именем image со строкой полезной нагрузки "test.jpeg", а не изображение с именем test.jpeg.
3. Если вы ожидаете, что это будет предоставленное пользователем изображение, вы должны использовать элемент <input type="file"> и захватить объект File из его свойства списка files. Другого способа доступа к пользовательскому контенту нет.