vue实现文件管理

2026-01-15 22:24:02VUE

实现文件上传功能

使用<input type="file">元素配合Vue的v-on:change事件监听文件选择。通过FileReaderAPI读取文件内容，将文件信息存储在组件的data中。

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    }
  }
}
</script>

文件列表展示

使用v-for指令循环渲染文件列表，显示文件名、大小和类型等信息。可以添加删除按钮实现文件移除功能。

<template>
  <div>
    <div v-for="(file, index) in files" :key="index">
      {{ file.name }} - {{ formatFileSize(file.size) }}
      <button @click="removeFile(index)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    removeFile(index) {
      this.files.splice(index, 1);
    }
  }
}
</script>

文件下载实现

通过创建Blob对象和URL.createObjectURL()方法生成下载链接。使用<a>标签的download属性触发文件下载。

downloadFile(file) {
  const url = URL.createObjectURL(new Blob([file.content]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', file.name);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

文件预览功能

根据文件类型实现不同的预览方式。图片文件可直接显示，文本文件可展示内容，PDF等格式可使用第三方库。

previewFile(file) {
  if (file.type.startsWith('image/')) {
    this.previewImage(file);
  } else if (file.type === 'text/plain') {
    this.previewText(file);
  } else {
    console.log('不支持预览此文件类型');
  }
},
previewImage(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    this.imagePreview = e.target.result;
  };
  reader.readAsDataURL(file);
}

文件分片上传

对于大文件，实现分片上传可以提高上传成功率。使用Blob.prototype.slice方法分割文件。

async uploadLargeFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  const chunks = Math.ceil(file.size / chunkSize);

  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(file.size, start + chunkSize);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', chunks);
    formData.append('filename', file.name);

    await axios.post('/upload', formData);
  }
}

文件拖放功能

通过监听dragover和drop事件实现拖放上传功能。需要阻止默认行为以避免浏览器直接打开文件。

vue实现文件管理

<template>
  <div 
    @dragover.prevent="dragover" 
    @drop.prevent="drop"
    :class="{ 'drag-active': isDragging }"
  >
    拖放文件到此处上传
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false
    }
  },
  methods: {
    dragover(event) {
      this.isDragging = true;
    },
    drop(event) {
      this.isDragging = false;
      const files = event.dataTransfer.files;
      this.handleFiles(files);
    }
  }
}
</script>