el-upload接口一次上传多张图片

**El-Upload 接口一次上传多张图片**

在实际开发中，我们经常需要实现一次上传多张图片的功能。这个需求可能出现在用户注册、修改个人信息、添加商品等场景中。在本文中，我们将使用 El-upload 组件来实现一次上传多张图片的接口。

###1. 前言首先，我们需要了解一下 El-upload 的基本使用方法。如果你已经熟悉了 El-upload 的使用，那么可以直接跳到下面的具体实现部分。

###2. 基本使用方法如果你还不熟悉 El-upload 的使用，可以参考以下示例代码：

html<template>
 <div>
 <el-upload class="upload-demo"
 action="/api/upload"
 :on-preview="handlePreview"
 :on-remove="handleRemove"
 :before-upload="beforeUpload"
 :limit="3"
 :auto-upload="false">
 <el-button slot="trigger" type="primary">选取文件</el-button>
 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
 </div>
</template>

<script>
export default {
 methods: {
 handlePreview(file) {
 console.log(file);
 },
 handleRemove(file, fileList) {
 console.log(file, fileList);
 },
 beforeUpload(file) {
 console.log(file);
 return true;
 }
 }
}
</script>

bashnpm install express multer

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

const app = express();

// 配置 Multerconst upload = multer({
 dest: './uploads/', //上传文件的存放位置 limits: { fileSize:5 *1024 *1024 }, // 文件大小限制（5MB）
 fileFilter(req, file, cb) {
 if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
 cb(null, true);
 } else {
 cb(new Error('Only images are allowed!'), false);
 }
 },
});

// 接口实现app.post('/api/upload', upload.array('file',10), (req, res) => {
 const files = req.files;
 console.log(files); //上传的文件列表 // 处理上传的文件 files.forEach((file) => {
 // todo: 处理每个文件 });

 res.json({ code:200, message: 'Upload success!' });
});

app.listen(3000, () => {
 console.log('Server listening on port3000');
});