vue实现文件管理

Vue 实现文件管理的方法

使用 Vue 和 Element UI 实现文件上传

安装 Element UI 并引入 Upload 组件：

npm install element-ui

在 Vue 文件中配置上传组件：

<template>
  <el-upload
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('文件大小不能超过 10MB');
        return false;
      }
      return true;
    },
    handleSuccess(response, file) {
      this.fileList.push(file.name);
    }
  }
};
</script>

使用 Vue 和 Axios 实现文件下载

通过 Axios 发送请求获取文件并下载：

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        url: '/api/download',
        method: 'GET',
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename.ext');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  }
};
</script>

使用 Vue 实现文件列表展示

通过 Vue 动态渲染文件列表：

<template>
  <ul>
    <li v-for="file in files" :key="file.id">
      {{ file.name }} - {{ file.size }}KB
      <button @click="deleteFile(file.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      files: [
        { id: 1, name: 'document.pdf', size: 1024 },
        { id: 2, name: 'image.jpg', size: 2048 }
      ]
    };
  },
  methods: {
    deleteFile(id) {
      this.files = this.files.filter(file => file.id !== id);
    }
  }
};
</script>

使用 Vue 和第三方库实现文件预览

使用 vue-pdf 库预览 PDF 文件：

npm install vue-pdf

在组件中使用：

<template>
  <pdf :src="pdfUrl" style="width: 100%; height: 600px;"></pdf>
</template>

<script>
import pdf from 'vue-pdf';

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    };
  }
};
</script>

使用 Vue 实现拖拽文件上传

通过 HTML5 的拖拽 API 实现文件拖拽上传：

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

<script>
export default {
  data() {
    return {
      isDragActive: false
    };
  },
  methods: {
    dragover() {
      this.isDragActive = true;
    },
    dragleave() {
      this.isDragActive = false;
    },
    drop(event) {
      this.isDragActive = false;
      const files = event.dataTransfer.files;
      this.uploadFiles(files);
    },
    uploadFiles(files) {
      // 实现文件上传逻辑
    }
  }
};
</script>