Vue Formulate多图上传至Express后端报错排查及文件名处理需求

一、为什么会抛出TypeError: Cannot read property 'length' of undefined？ #

当使用multer的upload.array('fieldname', count)处理多文件上传时，multer会把所有上传的文件存储在req.files数组中，而不是你代码中写的req.property_files。你错误地访问了一个不存在的属性，自然会得到undefined，进而在读取length时抛出错误。

二、完整修正方案（包含重命名、特殊字符处理、符合Vue Formulate的返回格式） #

1. 修正Express后端代码

我们需要完成几件核心事：

• 替换错误的req.property_files为multer标准的req.files
• 重命名文件：生成唯一ID+清理特殊字符的文件名，避免覆盖和兼容性问题
• 移除文件名中的特殊字符（空格、非英文字符、标点等）
• 返回Vue Formulate预期的JSON格式

首先安装uniqid包生成唯一文件名（防止文件覆盖）：

npm install uniqid

修改后的后端代码：

var express = require('express');
var router = express.Router();
var multer = require('multer');
const uniqid = require('uniqid'); // 生成唯一ID用于文件名
const DIR = './public/';
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017';
const dbName = 'dev';

// 清理文件名：保留字母、数字、点和横杠，其余替换为横杠并转小写
const sanitizeFilename = (filename) => {
  return filename.replace(/[^a-zA-Z0-9.-]/g, '-').toLowerCase();
};

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, DIR);
  },
  filename: (req, file, cb) => {
    // 拆分文件名和扩展名并分别清理
    const [name, ext] = file.originalname.split('.');
    const cleanName = sanitizeFilename(name);
    const cleanExt = sanitizeFilename(ext);
    // 生成唯一文件名：唯一ID + 清理后的文件名 + 扩展名
    const fileName = `${uniqid()}-${cleanName}.${cleanExt}`;
    cb(null, fileName);
  }
});

var upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    const allowedMimes = ["image/png", "image/jpg", "image/jpeg", "image/webp", "image/gif"];
    if (allowedMimes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('Only .png, .jpg, .jpeg, .webp and .gif formats are allowed!'));
    }
  }
});

router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

router.post('/read', upload.array('property_files', 10), (req, res, next) => {
  try {
    if (!req.files || req.files.length === 0) {
      return res.status(400).json({ error: 'No files uploaded' });
    }

    const baseUrl = `${req.protocol}://${req.get('host')}/public/`;
    // 整理符合Vue Formulate要求的返回格式
    const uploadedFiles = req.files.map(file => ({
      url: `${baseUrl}${file.filename}`,
      originalName: file.originalname, // 可选：返回原始文件名
      size: file.size // 可选：返回文件大小
    }));

    // 如需存入MongoDB，可在此添加数据库插入逻辑
    // MongoClient.connect(url, function(err, client) {
    //   const db = client.db(dbName);
    //   // 执行插入操作
    // });

    res.json({ files: uploadedFiles, message: 'Files uploaded successfully' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

2. 调整Vue端uploadFile函数（适配返回格式）

Vue Formulate的uploader在multiple模式下会为每个文件单独调用，现有代码基础上优化错误处理和返回值即可：

uploadFile: async function (file, progress, error, options) {
  try {
    const formData = new FormData()
    formData.append('property_files', file)
    const result = await fetch('http://localhost:3000/ca/read', {
      method: 'POST',
      body: formData
      // 不要手动设置Content-Type，浏览器会自动生成正确的multipart/form-data头
    })
    
    if (!result.ok) {
      throw new Error(`Upload failed: ${result.statusText}`);
    }
    
    progress(100) // 模拟进度完成（原生fetch不支持实时进度，如需可用axios替代）
    const response = await result.json();
    // 返回单个文件的url对象，符合Vue Formulate的要求
    return response.files[0];
  } catch (err) {
    error(err.message || 'Unable to upload file')
  }
},

三、关键细节说明 #

1. multer文件存储规则：单文件上传用req.file，多文件上传用req.files，这是multer的标准约定，别搞混。
2. 文件名安全处理：sanitizeFilename函数避免了特殊字符导致的跨系统兼容性问题，同时转小写让文件名更统一。
3. Vue Formulate返回要求：上传器函数需要返回包含url属性的对象，组件才能正确渲染已上传的图片预览。
4. 防文件覆盖：uniqid生成的唯一前缀，确保即使上传相同文件名的文件也不会互相覆盖。

内容的提问来源于stack exchange，提问作者Gandalf