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

ep6jt1vc 于 2023-02-08 发布在 iOS

关注(0)|答案(1)|浏览(156)

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

错误

axios

来源：https://stackoverflow.com/questions/70588644/file-upload-to-custom-folder-in-react

1条答案

按热度按时间

lndjwyie1#

如果你把文件保存到public文件夹，那么在你构建react项目（react-scripts build）之前，它在前端是不可用的。相反，你可以直接把它保存到build文件夹。但是下次你构建项目的时候，上传的文件就不见了。你可以决定在那里做什么。
回到你的问题，
您可以通过运行一个简单的服务器来实现，该服务器处理构建文件并处理一些HTTP请求。
1.安装express（服务器）和multer（处理文件上载）。

npm i express multer

1.在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"));

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

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

1.文件上载处理程序的内容类型需要为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文件夹中。您可以根据需要更改它。

赞(0）回复(0）举报 2023-02-08

我来回答

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

1条答案

相关问题

热门标签

最新问答