整体内容

介绍处理多个图片文件的方法
前端使用uniapp的api，后端使用express框架，数据库使用mysql

首先来看前端内容，使用uniapp上传文件api，会向后端传输一个formdata类型的数据，正常node.js是处理不了的

// 调用上传图片接口
uni.chooseImage({// 上传成功回调success: chooseImageRes => {// console.log(chooseImageRes);// 包括tempFilePaths（这是是所选所有图片地址的路径），tempFiles（这个是所选所有图片的地址对象）const tempFilePaths = chooseImageRes.tempFilePaths;//	上传多个文件时，多次访问tempFilePaths.forEach(item => {// 上传图片文件uni.uploadFile({url: 'http://127.0.0.1:3000/upload', // 所上传到的服务器地址filePath: item, // 要上传的文件路径信息name: 'files', // 传与后端的图片数组名formData: { 'user': 'test' },success: uploadFileRes => {console.log(uploadFileRes.data);}});});}
});

现在看后端，这里使用multer来处理formdata

multer详情可见https://github.com/expressjs/multer

以下是处理formdata以及数据库操作全部内容

// 上传图片  
// req.files 是 `files` 文件数组的信息  
router.post('/upload', upload.array('files', 4), function (req, res, next) {if (!req.files || req.files.length === 0) {return res.status(400).send('No files were uploaded.');}try {// 处理所有图片路径const uploadedFiles = req.files.map(file => {// 获取文件扩展名const ext = path.extname(file.originalname);// 生成唯一文件名const dbPath = path.join(UPLOAD_DIR, file.filename + ext).replace(/\\/g, '/');// 获取文件的原始路径const sourcePath = path.normalize(file.path);// 确保目标目录在，UPLOAD_DIR 是上传文件的目录if (!fs.existsSync(UPLOAD_DIR)) {// 目标目录不在，创建目录，recursive: true 表示如果目录不存在，则创建目录fs.mkdirSync(UPLOAD_DIR, { recursive: true });}// 重命名文件fs.renameSync(sourcePath, dbPath);return {path: dbPath,id: Date.now().toString() + Math.random().toString(36).substr(2, 5) // 为每个文件生成唯一ID};});// 数据库存储代码const sql = 'INSERT INTO `photos` (`id`, `path`) VALUES (?, ?)';// 每个文件使用自己的唯一IDconst values = uploadedFiles.map(file => [file.id, file.path]);// 使用 Promise 处理数据库操作，all 方法可以同时执行多个数据库操作  Promise.all(values.map(item => {return new Promise((resolve, reject) => {connection.query(sql, item, function (err, result) {if (err) reject(err);else resolve(result);});});})).then(() => {res.send({success: true,message: 'Files uploaded successfully',// 返回图片路径和IDfiles: uploadedFiles.map(file => ({id: file.id,path: file.path,url: `http://localhost:3000/${file.path}`}))});}).catch(err => {console.error('数据库存储错误:', err);res.status(500).send('Error saving files to database');});} catch (error) {console.error('文件处理错误:', error);res.status(500).send('Error processing files');}
});

以下为分步解释

首先需要使用multer来处理formdata数据，接收formdata数据req.body是空的

使用path来处理multer造成的路径问题

先导入

使用multer({ dest: 'uploads/' })表示告诉它你是在同级目录uploads下存储文件

const multer = require('multer'); // 上传文件
const upload = multer({ dest: 'uploads/' }); // 上传文件到uploads目录

在路由中使用它

upload.array('files')代表你要上传的文件可能是多个，使用数组存储，而数组名是files

.array(fieldname[, maxCount])，还可以配置maxCount来限制最大文件数

router.post('/upload', upload.array('files', 4), function (req, res, next)  {}

处理路径

使用multer后，文件数据会存放在req.files中

不做处理的到的filename是没有后缀的，如下

以下是完整路径处理流程

try {// 处理所有图片路径const uploadedFiles = req.files.map(file => {// 获取文件扩展名const ext = path.extname(file.originalname);// 生成唯一文件名const dbPath = path.join(UPLOAD_DIR, file.filename + ext).replace(/\\/g, '/');// 获取文件的原始路径const sourcePath = path.normalize(file.path);// 确保目标目录在，UPLOAD_DIR 是上传文件的目录if (!fs.existsSync(UPLOAD_DIR)) {// 目标目录不在，创建目录，recursive: true 表示如果目录不存在，则创建目录fs.mkdirSync(UPLOAD_DIR, { recursive: true });}// 重命名文件fs.renameSync(sourcePath, dbPath);return {path: dbPath,id: Date.now().toString() + Math.random().toString(36).substr(2, 5) // 为每个文件生成唯一ID};});
}

以下是内容详细解释：

首先可以使用extname来获取文件的后缀，file.originalname是含有后缀的，它表示用户计算机上的文件的名称，如果是中文名称会乱码，所以使用filename进行加工使用

使用过程中发现路径默认使用\会造成各种错误、转义错误等，会造成路径错误，所以统一使用/代替掉

使用path.join()方法拼接filename与ext扩展名（后缀）就可以得到一个没有乱码的完整路径

// 获取文件扩展名
const ext = path.extname(file.originalname);// 处理文件路径, UPLOAD_DIR 是上传文件的目录
// 将 file.filename + ext 拼接成新的文件路径
// 将所有的 \ 替换为 /
const dbPath = path.join(UPLOAD_DIR, file.filename + ext).replace(/\\/g, '/');

接下来进行路径加工，拼接上目录，使用path.normalize()格式化路径，保证路径没有问题，然后替换之前的fsPath

// 将 dbPath 拼接成 fsPath
// __dirname 是当前文件的目录（本地完整目录）,中间使用空字符串拼接，避免有多余的 / 等等，看个人需求
// const fsPath = path.join(__dirname, '..', dbPath);// 确保源路径格式正确，path.normalize() 将路径格式化
const sourcePath = path.normalize(file.path);if (!fs.existsSync(UPLOAD_DIR)) {// 目标目录不在，创建目录，recursive: true 表示如果目录不存在，则创建目录fs.mkdirSync(UPLOAD_DIR, { recursive: true });
}// 重命名文件，renameSync(new_file_path, old_file_path) 重命名文件，将旧文件路径重命名为新文件路径,将位于 sourcePath 的文件或目录重命名为 dbPath 
fs.renameSync(sourcePath, dbPath);
return {path: dbPath,id: Date.now().toString() + Math.random().toString(36).substr(2, 5) // 为每个文件生成唯一ID
};return dbPath; // 返回用于数据库存储的统一格式路径

数据库操作

定义插入数据的sql语句，将uploadedFiles中的路径都遍历出来得到values

 // 数据库存储代码const sql = 'INSERT INTO `photos` (`id`, `path`) VALUES (?, ?)';// 在处理路径时已经生成的idconst values = uploadedFiles.map(file => [file.id, file.path]);

然后通过遍历执行所以的sql语句

// 使用 Promise 处理数据库操作，all 方法可以同时执行多个数据库操作  
Promise.all(values.map(item => {return new Promise((resolve, reject) => {// 执行数据库操作connection.query(sql, item, function (err, result) {if (err) reject(err);else resolve(result);});});
})).then(() => {res.send({success: true,message: 'Files uploaded successfully',// 返回图片路径和IDfiles: uploadedFiles.map(file => ({id: file.id,path: file.path,url: `http://localhost:3000/${file.path}`}))});}).catch(err => {	// 捕获错误console.error('数据库存储错误:', err);res.status(500).send('Error saving files to database');});

可以看到数据存储成功

测试

最后前端测试是否可以正常访问

写一个访问api

// 获取图片
router.get('/upload', function (req, res, next) {const sql = 'SELECT * FROM `photos`';connection.query(sql, function (err, result) {if (err) {console.error('查询数据库错误:', err);return res.status(500).send('Error querying database');}// 为每个图片添加完整的访问URLconst photosWithUrls = result.map(photo => ({id: photo.id,path: photo.path,url: `http://localhost:3000/${photo.path}` // 添加完整的访问URL}));res.send(photosWithUrls);});
});

前端访问，正常情况是不需要传上面所传的url的，由于是本地服务器可以传，测试方便

getImg() {this.$http.get('http://127.0.0.1:3000/upload').then(res => {this.imgList = [];res.data.forEach(item => {item.path = 'http://127.0.0.1:3000/' + item.path;this.imgList.push(item);});console.log(this.imgList);}).catch(err => {console.log(err);});
}

图片都可以正常显示