如何使用react/node和multer上传多个文件

Question

我正在尝试用React/express和multer上传多个文件。但是在我的代码中找不到错误的地方…(我尝试了很多我在这里找到的解决方案，但我看不出我哪里错了)。下面是我的代码：

**前端：**

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    let newArr = [];
    for (let i = 0; i < file.length; i++) {
      newArr.push(file[i]);
    }
    formData.append('monfichier', newArr);

    console.log(formData.get('monfichier'));

    axios
      .post('http://localhost:3000/uploaddufichier', formData)
      .then((res) => res.data);
  };

  return (
    <div className='App'>
      <form
        onSubmit={handleSubmit}
        method='POST'
        encType='multipart/form-data'
        action='uploaddufichier'
      >
        <input
          type='file'
          name='monfichier'
          onChange={(e) => setFile(e.target.files)}
          multiple
        />
        <button> envoyer </button>
      </form>
    </div>
    enter code here

背

const multer = require('multer');
const fs = require('fs');
const cors = require('cors');
const path = require('path');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'file-storage');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now());
  },
});
const upload = multer({ storage: storage });

app.use(express.json());
app.use(router);
app.use(cors());
app.use('/file-storage', express.static('file-storage'));
app.use(function (err, req, res, next) {
  console.log('This is the invalid field ->', err.field);
  next(err);
});

app.post(
  '/uploaddufichier',
  upload.array('monfichier'),
  function (req, res, next) {
    console.log(req.files);
    fs.rename(
      req.files.path,
      'file-storage/' + req.files.originalname,
      function (err) {
        if (err) {
          res.send('problème durant le déplacement');
        } else {
          res.send('Fichier uploadé avec succès');
        }
      }
    );
  }
);

现在，后端console.log(req.files)返回一个空数组...前端console.log(formData.get('monfichier') )返回对象文件，如果有人可以帮助我解决这个问题的话……我会很高兴的:)

Answer 1

一个小的调整将修复它，让我修复它，并突出显示将修复它下面的调整。

​

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    let newArr = [];
    //********* HERE IS THE CHANGE ***********
    for (let i = 0; i < file.length; i++) {
      formData.append('monfichier', file[i]);
    }
    

    console.log(formData.get('monfichier'));

    axios
      .post('http://localhost:3000/uploaddufichier', formData)
      .then((res) => res.data);
  };

  return (
    <div className='App'>
      <form
        onSubmit={handleSubmit}
        method='POST'
        encType='multipart/form-data'
        action='uploaddufichier'
      >
        <input
          type='file'
          name='monfichier'
          onChange={(e) => setFile(e.target.files)}
          multiple
        />
        <button> envoyer </button>
      </form>
    </div>

​

multer上的array方法通过网络接受多个文件，只要它们具有您指定的相应名称(在本例中为'monfichier')。因此，我们在前端对for循环所做的是附加几个具有相同名称的文件- monfichier。

这个问题已经9个月没有回答了，但希望它能对你或任何其他面临这个障碍的人有所帮助。#干杯