el-upload 批量上传文件
时间: 2023-11-19 19:07:25 浏览: 37
以下是使用el-upload实现批量上传文件的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:multiple="true"
:on-success="handleSuccess"
:limit="3"
:on-exceed="handleExceed"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500K = file.size / 1024 < 500;
if (!isJPG || !isLt500K) {
this.$message.error('上传图片只能是 JPG/PNG 格式,且不超过 500KB');
return false;
}
return true;
}
}
}
</script>
```
在上述代码中,我们使用了el-upload组件来实现文件上传功能。其中,我们设置了multiple属性为true,表示支持批量上传文件。同时,我们还设置了limit属性为3,表示最多只能上传3个文件。在beforeUpload方法中,我们对上传的文件进行了格式和大小的限制,只允许上传jpg/png格式的文件,且文件大小不超过500kb。在handleSuccess方法中,我们可以获取到上传成功后的响应信息、上传的文件对象和已上传的文件列表。