文件上传到反应中的自定义文件夹

Question

您好，我需要使用 class component 在 react 中上传文件，因为它是遗留应用程序。我只需要 UI 中的这个文件，所以我不想将它保存到数据库中。我必须保存在 public folder 中，也在 public 文件夹下我需要为用户提供功能以提供文件和文件夹名称。

我需要在下面的代码中做哪些更改。下面的代码工作正常。唯一的问题是我需要将文件上传到文件夹并需要手动输入 file and folder name.

import axios from 'axios';
import React, { Component } from 'react';
class FileUpload extends Component {
  state = {
    selectedFile: null,
  };

  onFileChange = (event) => {
    this.setState({ selectedFile: event.target.files[0] });
  };

  onFileUpload = () => {
    const formData = new FormData();
    formData.append(
      'myFile',
      this.state.selectedFile,
      this.state.selectedFile.name
    );

    console.log(this.state.selectedFile);
    axios.post('api/uploadfile', formData);  //I need to change this line
  };

  fileData = () => {
    if (this.state.selectedFile) {
      return (
        <div>
          <h2>File Details:</h2>
          <p>File Name: {this.state.selectedFile.name}</p>
          <p>File Type: {this.state.selectedFile.type}</p>
          <p>
            Last Modified:{' '}
            {this.state.selectedFile.lastModifiedDate.toDateString()}
          </p>
        </div>
      );
    } else {
      return (
        <div>
          <br />
          <h4>Choose before Pressing the Upload button</h4>
        </div>
      );
    }
  };

  render() {
    return (
      <div>
        <h1>Plese select the translation file</h1>
        <div>
          <input type="file" onChange={this.onFileChange} />
          <button onClick={this.onFileUpload}>Upload!</button>
        </div>
        {this.fileData()}
      </div>
    );
  }
}

export default FileUpload;

编辑 1：-

编辑 2：-

app.listen(80, () => console.log('Listening on port 80'));
 axios.post('http://localhost:80/api/uploadfile', formData, {

错误

Answer 1

如果您将文件保存到 public 文件夹，在您构建 React 项目 (react-scripts build) 之前，前端将无法使用它。相反，您可以将其直接保存到 build 文件夹。但是下次构建项目时上传的文件不见了。你可以决定在那里做什么。

回到你的问题，

您可以使用运行一个简单的服务器来实现它，该服务器前端构建文件并处理一些 HTTP 请求。

安装express（服务器）和multer（处理文件上传）。

npm i express multer

在您的 React 项目的根目录中创建另一个名为 server 的文件夹。在其中创建一个名为 index.js 的文件并添加以下代码。

const express = require("express");
const app = express();
const multer  = require('multer')

// setup multer for file upload
var storage = multer.diskStorage(
    {
        destination: './build',
        filename: function (req, file, cb ) {
            cb( null, file.originalname);
        }
    }
);

const upload = multer({ storage: storage } )

app.use(express.json());
// serving front end build files
app.use(express.static(__dirname + "/../build"));

// route for file upload
app.post("/api/uploadfile", upload.single('myFile'), (req, res, next) => {
    console.log(req.file.originalname + " file successfully uploaded !!");
    res.sendStatus(200);
});

app.listen(3000, () => console.log("Listening on port 3000"));

要启动上述服务器，请更改 package.json 文件中 scripts 部分中的 start 命令。它将构建项目并启动运行ning 服务器。

"scripts": {
    "start": "npm run build && node ./server",
    ...
    ...
}

您的文件上传处理程序需要将内容类型设置为 multipart/form-data

  onFileUpload = () => {
    const formData = new FormData();
    formData.append("myFile", this.state.selectedFile);

    console.log(this.state.selectedFile);
    axios.post("http://localhost:3000/api/uploadfile", formData, {
      headers: {
        "content-type": "multipart/form-data",
      },
    }); //I need to change this line
  };

现在运行 npm start 并尝试上传文件。它将出现在 build 文件夹中。您可以根据需要进行更改。

文件上传到反应中的自定义文件夹

File upload to custom folder in react

javascript

reactjs

react-redux

axios