使用Express.js、React和MySQL上传图像文件

npm install multer

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

const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('image'), (req, res) => {
  // 处理上传的文件
  const file = req.file;
  console.log(file);
  // 保存文件路径到数据库等操作
  // 返回上传成功或失败的响应
  res.send('文件上传成功');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

import React, { useState } from 'react';
import axios from 'axios';

function FileUpload() {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };

  const handleUpload = () => {
    const formData = new FormData();
    formData.append('image', file);
    axios.post('/upload', formData)
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
}

export default FileUpload;