Question

我正在尝试创建一个React应用，该应用从用户的计算机读取DICOM（.dcm）文件并将其显示在遮阳板上。

我设法使用react-dropzone成功选择了文件，但我不知道如何获取文件路径以进行读取。

检查其他类似的问题，我读到“您只能在前端读取文件，所有操作都必须在后端进行”，所以我认为我不需要将文件发送到后端，但是我一直无法找到答案对我有用。

这是我的dropzone包装器：

                <Dropzone multiple={false} onDrop={acceptedFiles => this.updateState(acceptedFiles)}>
                  {({ getRootProps, getInputProps }) => (
                    <section>
                      <div {...getRootProps()}>
                        <input {...getInputProps()} />
                        <p>
                          Drag 'n' drop some files here, or click to select
                          files
                        </p>
                      </div>
                    </section>
                  )}
                </Dropzone>

这是updateState（acceptedFiles）方法：

  updateState(acceptedFiles) {
    this.setState({Files:acceptedFiles});
    // i use this state to control that i have read a file.
    this.setState({leido:true});
    console.log(this.state.Files);
    console.log(this.state.leido);
    this.state.Files.map(file => (
      console.log(file.path)
    ))
  };

this.state.Files成为一个元素的数组，但是路径显然与文件名相同。当我尝试读取文件时，在控制台上总是会出现相同的错误：

获取http://localhost:3000/filename.format 404（未找到）

如何获取读取文件的正确路径？无需以任何方式进行操作。

Answer 1

查看此answer，或尝试以下代码：

onDrop={async ([file]) => {
  let reader = new FileReader();
  reader.onload = function(e) {
    const contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}}

我如何读取使用dropzone上传的文件而不将其发送到React中的后端？

1 个答案: