以下是一个基于Element UI框架实现的文件上传下载组件的示例代码:
HTML代码:
<template>
<div>
<el-upload
class="upload-demo"
ref="upload"
:action="uploadUrl"
:on-success="handleUploadSuccess"
:file-list="fileList"
:accept="acceptFormat"
:limit="limitNum"
multiple
drag
list-type="text">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传{{acceptFormat}}格式的文件,每次上传的文件数量不能超过{{limitNum}}个,且文件大小不超过{{maxSize}}MB</div>
</el-upload>
<el-button type="primary" @click="handleDownload">下载文件</el-button>
</div>
</template>
JavaScript代码:
<script>
export default {
data() {
return {
uploadUrl: '/api/upload', // 文件上传地址
fileList: [], // 已上传的文件列表
acceptFormat: '.doc,.docx,.pdf,.png,.xls,.xlsx', // 支持上传的文件格式
limitNum: 5, // 限制每次上传的文件数量
maxSize: 20, // 限制文件的最大大小(MB)
downloadUrl: '/api/download' // 文件下载地址
};
},
methods: {
// 文件上传成功后的回调函数
handleUploadSuccess(response, file, fileList) {
console.log('上传成功', response, file, fileList);
this.fileList = fileList;
},
// 下载文件
handleDownload() {
// 获取选中的文件的ID
const selectedFiles = this.fileList.filter(file => file.checked);
if (!selectedFiles || selectedFiles.length === 0) {
this.$message.warning('请选择您要下载的文件');
return;
}
// 构造下载链接,下载选中的文件
const ids = selectedFiles.map(file => file.id);
const url = this.downloadUrl + '?ids=' + ids.join(',');
window.open(url);
}
}
};
</script>
该组件包含一个<el-upload>
和一个<el-button>
,<el-upload>
用于上传文件,<el-button>
用于下载文件。
组件的数据包括:
uploadUrl
:文件上传地址。fileList
:已上传文件的列表。acceptFormat
:支持上传的文件格式,使用英文逗号分隔。limitNum
:限制每次上传的文件数量。maxSize
:限制文件的最大大小(MB)。downloadUrl
:文件下载地址。
组件的方法包括:
handleUploadSuccess
:文件上传成功后的回调函数,用于更新文件列表。handleDownload
:点击下载按钮时的回调函数,用于构造下载链接并下载选中的文件。
注:该组件中的文件上传和下载功能均需要在后端实现对应的接口。