无需外部库即可进行拖放反应

Question

我正在尝试使用正常的反应代码查找文件上传，而不使用任何外部依赖项或插件。

任何人都可以帮助我解决拖放文件上传的问题。任何小提琴都会受到赞赏

我只是尝试了正常的文件上传并增加了填充

<input type="file" className="inputFile" name="file"  onChange={(e)=>this.props.onChangeHandler(event)} />

和CSS

.inputFile {
    left: 29%;
    padding: 10px 159px 433px 0px;
    position: absolute;
    opacity: 0;
}

现在我有该区域，但是在拖放时onChange不会触发 这是我的反应代码

onChangeHandler(event){
        this.setState({
          selectedFile: event.target.files[0]
        });
        this.onClickHandler();
      };
      onClickHandler = () => {
        const data = new FormData();
        data.append("file", this.state.selectedFile);
        axios
          .post("http://localhost:8080/api/assetlibrary/ms/upload", data, {
            onUploadProgress: ProgressEvent => {
              this.setState({
                //loaded: 100
                loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100
              });
            }
          })
          .then(res => {
            this.setState({
                warningToast:true
            })
            setTimeout(() => {this.setState({warningToast:false})},5000);
          });
      };

谁能帮我整理一下为什么onChange不会在拖放时触发。任何工作中的小提琴都将受到高度赞赏。

注意：请不要依赖任何外部反应/插件

Answer 1

您做得还不错，但是应该使用onDrop() synthetic event而不是onChange()。

这可以做到：

<input
  type="file"
  className="inputFile"
  name="file"
  onDrop={e => this.props.onChangeHandler(event)}
/>

在这里您可以进行测试：