### 多
文件上传与单
文件上传的区别
在 `
Element Plus` 的 `
el-upload`
组件中，多
文件上传和单
文件上传的主要区别在于配置项的
选择以及监听器的行为。
对于 **单
文件上传**，通常只需要设置
组件属性来限制每次只允许
选择一个文件，并通过监听器处理该
文件的上传逻辑。而对于 **多
文件上传**，则需考虑如何有效地管理多个
文件的同时或顺序上传，避免因重复触发监听事件而导致不必要的请求发送[^1]。
### 实现方法
#### 单
文件上传
为了实现单
文件上传，在初始化 `
el-upload` 时应指定 `limit=1` 属性以确保用户只能
选择单一
文件进行上传。此外，还需定义 `on
-exceed` 方法用于当超过最大数量时给出提示或其他操作；而针对实际的
文件变化，则可通过简单的 `on
-change` 来响应并提交所选
文件给服务器。
```html
<template>
<div>
<!
-- Single File
Upload -->
<
el-upload action="your/
upload/endpoint"
:limit="1"
:on
-exceed="handleExceed"
:on
-change="handleChangeSingle">
Click or drag a file to this area to
upload.
</
el-upload>
</div>
</template>
<script setup lang="ts">
import { ref } from '
vue';
const handleChangeSingle = (file, fil
eList) => {
console.log('
Uploading single file:', file);
};
const handleExceed = () => {
alert('Only one file can be
uploaded at once.');
};
</script>
```
#### 多
文件上传
当涉及到多
文件上传时，除了开启 `multiple=true` 让用户可以
选择多个
文件外，还需要特别注意 `on
-change` 监听器可能会被多次调用的问题。为了避免这种情况下的性能浪费或是错误的数据传输，建议收集所有待传
文件到数组中，等到全部
文件都已选定后再统一发起上传请求[^2]。
另一种更优雅的方式是采用递归方式逐个上传这些
文件，即在
一个文件完成其上传过程之后再去启动下
一个文件的上传流程。这种方法不仅有助于减少并发连接数从而降低服务器负担，而且能够更好地控制整个上传进度条显示等用户体验方面的需求。
```html
<template>
<div>
<!
-- Multiple Files
Upload with Recursive Approach
-->
<
el-upload v
-if="!
uploading" multiple
@change="handleChangeMultiple"
class="
upload-demo">
Drag files here or click to s
elect them.
</
el-upload>
<p v
-else>Loading...</p>
</div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from '
vue';
import axios from 'axios';
let
uploading = ref(false);
// Collect all s
elected files into an array first before starting
uploads
function handleChangeMultiple(fil
eList) {
const filesTo
Upload = Array.from(fil
eList).map(item => item.raw);
async function recursive
Upload(files) {
if (!files.length ||
uploading.value === true) return;
try {
uploading.value = true;
await Promise.all(
files.map(async (file, index) =>
new Promise((resolve, reject) => {
setTimeout(() => {
// Simulate API call d
elay using timeout; replace with real API calls as needed
resolve(axios.post('/api/
upload', file));
}, Math.random() * 2000); // Randomized d
elays between each request
})
)
);
console.log(`${files.length} files have been successfully
uploaded.`);
} catch(error){
console.error(`Failed to
upload some of the ${files.length} files`, error);
} finally{
uploading.value = false;
}
}
recursive
Upload(filesTo
Upload);
}
</script>
```
扫一扫
3012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
