React File上传仅检索文件名

Question

人们正在拖放文件。我已经差不多完成了，并且正在检索文件名。但是我究竟需要发送什么信息到后端来存储图像还是令人怀疑。同样，我也需要发送视频或pdf。此外，预览也将非常有趣。你能帮忙吗..这是我尝试过的代码

DragAndDrop.js

import React, { Component } from "react";
class DragAndDrop extends Component {
  state = {
    drag: false
  };
  dropRef = React.createRef();
  handleDrag = e => {
    e.preventDefault();
    e.stopPropagation();
  };
  handleDragIn = e => {
    e.preventDefault();
    e.stopPropagation();
    this.dragCounter++;
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      this.setState({ drag: true });
    }
  };
  handleDragOut = e => {
    e.preventDefault();
    e.stopPropagation();
    this.dragCounter--;
    if (this.dragCounter === 0) {
      this.setState({ drag: false });
    }
  };
  handleDrop = e => {
    console.log("e", e);
    e.preventDefault();
    e.stopPropagation();
    this.setState({ drag: false });
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      this.props.handleDrop(e.dataTransfer.files);
      e.dataTransfer.clearData();
      this.dragCounter = 0;
    }
  };
  componentDidMount() {
    let div = this.dropRef.current;
    div.addEventListener("dragenter", this.handleDragIn);
    div.addEventListener("dragleave", this.handleDragOut);
    div.addEventListener("dragover", this.handleDrag);
    div.addEventListener("drop", this.handleDrop);
  }
  componentWillUnmount() {
    let div = this.dropRef.current;
    div.removeEventListener("dragenter", this.handleDragIn);
    div.removeEventListener("dragleave", this.handleDragOut);
    div.removeEventListener("dragover", this.handleDrag);
    div.removeEventListener("drop", this.handleDrop);
  }
  render() {
    return (
      <div
        style={{ display: "inline-block", position: "relative" }}
        ref={this.dropRef}
      >
        {this.state.dragging && (
          <div
            style={{
              border: "dashed grey 4px",
              backgroundColor: "rgba(255,255,255,.8)",
              position: "absolute",
              top: 0,
              bottom: 0,
              left: 0,
              right: 0,
              zIndex: 9999
            }}
          >
            <div
              style={{
                position: "absolute",
                top: "50%",
                right: 0,
                left: 0,
                textAlign: "center",
                color: "grey",
                fontSize: 36
              }}
            >
              <div>drop here :)</div>
            </div>
          </div>
        )}
        {this.props.children}
      </div>
    );
  }
}
export default DragAndDrop;

我的组件

import React from "react";
import ReactDOM from "react-dom";
import Modal from "react-modal";
import { Player } from "video-react";
import "./styles.css";
import AutoFill from "./data";
import DragAndDrop from "./DragAndDrop";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false,
      files: []
}
}
handleDrop = files => {
    console.log(files);
    let fileList = this.state.files;
    for (var i = 0; i < files.length; i++) {
      if (!files[i].name) return;
      fileList.push(files[i].webkitRelativePath );
    }
    this.setState({ files: fileList });
  };
render(
return{
<div>
          <DragAndDrop handleDrop={this.handleDrop}>
            <div className="dropHolder" style={{ height: 300, width: 250 }}>
              {this.state.files.map(file => (
                <div key={file}>{file}</div>
              ))}
            </div>
          </DragAndDrop>
</div>
})
export default App

您可以帮我提供所有需要发送到后端进行文件上传的信息（现在获取文件名，还获取类型和大小），但是据我了解，需要二进制/多部分数据。我该如何获取还需要上传pdf和视频的图像，可能的图像预览也将有所帮助。

任何工作中的演示或小提琴都会受到高度赞赏