React中将文件上传到自定义文件夹

Question

React中将文件上传到自定义文件夹

3

嗨，我需要在遗留应用程序中使用class component来上传文件到react。我只需要将这个文件保存在UI中，所以不想将其保存到数据库中。我需要将其保存在public folder下，并且还需要让用户能够输入文件和文件夹的名称。

我需要对下面的代码做哪些更改？下面的代码完全正常工作。唯一的问题是我需要将文件上传到文件夹中，并手动输入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, {

错误

- Shruti sharma

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amila Senadheera · Accepted Answer

如果您将文件保存到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命令。它将构建项目并开始运行服务器。

"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文件夹中。您可以根据需要进行更改。