[React] #10. express+reactファイルのアップロード、削除

expressインストールディレクトリで実行

npm install express-fileupload cors

reactプロジェクト作成ディレクトリで実行

npm install axios

express index.次の項目をjsに追加

const fileupload = require("express-fileupload");
const cors = require("cors");

app.use(cors());
app.use(fileupload());
app.use(express.static("files"));


app.post("/fileUpload", (req, res) => {

  let saveFilepath = path.join( __dirname, "react-project", "build", "/")  ;
  let file = req.files.file;
  let fileName = file.name;

  file.mv(saveFilepath+fileName, (err) => {
    if (err) {
      res.status(500).send({ message: "파일 전송 실패", code: 200 });
    }
    res.status(200).send({ message: "파일 전송 성공", code: 200 });
  });
} );

反応応用。jsは以下からなる

import { useEffect, useState } from 'react';
import axios from "axios";

function App() {

  const [file, changeFile] = useState();
  const [fileName, changeFileName] = useState("");

  return (
    <div className="App">
      <input type="file" onChange={ (e)=>{
        changeFile(e.target.files[0]);
        changeFileName(e.target.files[0].name);
      } } />
      <button onClick={ ()=>{

        const formData = new FormData();

        formData.append("file", file);
        formData.append("fileName", fileName);
        try {
          axios.post("http://localhost:3001/fileUpload", formData).then(
            (response)=>{
              console.log(response);
            }
          )

        } catch (exception) {
          console.log(exception);
        }

      } }>업로드!!</button>
    </div>
  );

}

expressのファイルの削除

var fileSystem = require('fs');

app.post("/fileDelete/:image", (request, response) => {

  fileSystem.unlink(`${__dirname}/react-project/public/upload/${request.params.image}`, function(err) {
   
    if(err) {
      response.json({isDeleted:"false"});
    }
    
    response.json({isDeleted:"true"});

  })

});

次の位置は