一、已完成: 1.完成文件列表的展示、预览、删除、下载(多文件、多目录打包下载) 2.文件、文件夹的上传,大文件、多文件上传、断点续传(在另一台电脑的浏览器可以继续) 二、待完成: * 移动复制文件和文件夹(可拖动) * 文件和文件夹的分享,可设置连接时效 * 文件的收藏和打标签(方便筛选) * 适配手机界面
46 lines
771 B
Vue
46 lines
771 B
Vue
<!-- 一个上传事例文件 -->
|
|
<template>
|
|
<div>
|
|
<el-button @click="upload">上传</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Bus from '@/assets/js/bus'
|
|
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
// 文件选择后的回调
|
|
Bus.$on('fileAdded', () => {
|
|
console.log('文件已选择')
|
|
})
|
|
|
|
// 文件上传成功的回调
|
|
Bus.$on('fileSuccess', () => {
|
|
console.log('文件上传成功')
|
|
})
|
|
},
|
|
destroyed() {
|
|
Bus.$off('fileAdded')
|
|
Bus.$off('fileSuccess')
|
|
},
|
|
methods: {
|
|
upload() {
|
|
// 打开文件选择框
|
|
Bus.$emit('openUploader', {
|
|
id: '1111' // 传入的参数
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|