IT技术 - 文件上传到react中的自定义文件夹 - 吾爱随笔录

文件上传到react中的自定义文件夹

IT技术 javascript reactjs react-redux axios

2022-08-04 00:16:49

嗨，我需要上传文件，因为它是旧版应用程序react。class component我只需要这个文件，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, {

错误

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"));

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

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

其它你可能感兴趣的问题

上一篇react,js组件部分渲染下一篇实时搜索错误