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

【问题标题】：How to upload multiple file with react/node and multer如何使用 react/node 和 multer 上传多个文件
【发布时间】：2021-04-09 10:14:07
【问题描述】：

我正在尝试使用 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')返回[object File],[object File] 如果有人可以帮助我解决这个问题....会很高兴:)

【问题讨论】：

我认为您应该为循环中的每个文件使用formData.append('monfichier['+i+']', file[i]);。
使用您当前的代码，您是否检查了req.file 的值（而不是req.files）？
@alexis_thual ：仍然未定义，节点返回：TypeError [ERR_INVALID_ARG_TYPE]：“oldPath”参数必须是字符串类型或缓冲区或 URL 的实例。在 Object.rename (fs.js:726:13) 处收到未定义
@Molda ：同样的问题，仍然是一个空数组，所以 req.files.path 未定义...
是否有理由创建一个新数组而不是 formData.append('monfichier', file);？

标签： node.js reactjs file-upload multer

【解决方案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 上的数组方法通过网络接受多个文件，只要它们具有您指定的相应名称（在我们的例子中为“monfichier”）。所以我们对前端的for循环所做的就是追加几个同名的文件——monfichier。

这个问题已经有 9 个月没有答案了，但希望它对您或任何其他面临此阻止程序的人有所帮助。 #干杯

【讨论】：