vue实现文件管理

2026-03-28 22:46:43VUE

vue实现文件管理

Vue 文件管理实现方案

核心功能模块

文件上传组件 使用 <input type="file"> 结合 FileReader API 实现通过 @change 事件监听文件选择，用 FormData 处理多文件上传

<template>
  <input type="file" multiple @change="handleUpload">
</template>

<script>
export default {
  methods: {
    handleUpload(e) {
      const files = Array.from(e.target.files)
      const formData = new FormData()
      files.forEach(file => formData.append('files[]', file))
      // 发送到后端API
    }
  }
}
</script>

文件列表展示 采用虚拟滚动优化大文件列表性能配合计算属性实现排序和过滤

<template>
  <div v-for="file in filteredFiles" :key="file.id">
    {{ file.name }} - {{ formatSize(file.size) }}
  </div>
</template>

<script>
export default {
  computed: {
    filteredFiles() {
      return this.files.filter(f => f.name.includes(this.searchQuery))
    }
  }
}
</script>

文件预览功能 通过文件类型识别展示不同预览组件图片/PDF/文本分别采用不同处理方式

previewFile(file) {
  if (file.type.startsWith('image/')) {
    return URL.createObjectURL(file)
  }
  if (file.type === 'application/pdf') {
    // 使用PDF.js库
  }
}

技术实现要点

状态管理 Vuex 存储全局文件状态模块化组织文件相关数据

const fileModule = {
  state: () => ({
    currentDir: '/',
    selectedFiles: []
  }),
  mutations: {
    SET_DIR(state, path) {
      state.currentDir = path
    }
  }
}

后端交互 Axios 封装文件相关API请求处理上传进度和断点续传

api.uploadFile(file, {
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    // 更新进度条
  }
})

本地文件操作 使用浏览器 FileSystem Access API 实现拖拽上传和目录操作

async function getDirHandle() {
  return await window.showDirectoryPicker()
}

性能优化策略

分片上传 大文件切割为多个分片并行上传提高传输效率

const CHUNK_SIZE = 5 * 1024 * 1024 // 5MB
for (let i = 0; i < file.size; i += CHUNK_SIZE) {
  const chunk = file.slice(i, i + CHUNK_SIZE)
  // 上传单个分片
}