0

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

我设法使用 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 成为一个元素的数组，但路径显然与文件名相同。当我尝试读取文件时，我总是在控制台上收到相同的错误：

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

如何获得读取文件的正确路径？没有必要以任何方式操纵它。

4

1 回答 1

-1

请参阅此答案，或尝试以下代码：

onDrop={async ([file]) => {
  let reader = new FileReader();
  reader.onload = function(e) {
    const contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}}
于 2019-05-13T13:15:52.310 回答