如何在 React 应用程序中获取根文件夹之外的文件的路径

Question

This is simplified folder structure in my React application created with the create-react-app. For the back-end I'm using the Express framework.

└── ReactApp/
    ├── client/
    |  ├── node_modules/
    |  ├── public/
    |  └── src/
    |      └── components/
    |         └── component.js
    └── server/
       ├── index.js
       └── Uploads/
           └── file.txt

Inside component.js file I want to define the path to the file.txt file located to the server/Uploads folder.

 handleClick() {
        const pathToFile = '../../server/Uploads/file.txt;
        this.setState({ input: pathToFile})
  }

The issue is that this defined path cannot locate the txt file inside the Uploads folder.

Answer 1

Try:

handleClick() {
   const pathToFile = '../../../server/Uploads/file.txt';
   this.setState({ input: pathToFile})
}

Answer 2

The solution is to configure ExpressJS to serve static files inside the Uploads folder.

index.js

app.use(express.static('Uploads'));

and then change the path inside the component.js file.

handleClick() {
    const pathToFile = 'file.txt';
    this.setState({ input: pathToFile})
  }