当前位置：首页 > VUE

vue实现下载管理

2026-02-24 20:29:32VUE

Vue 实现下载管理

在 Vue 中实现下载管理功能通常需要结合前端和后端逻辑，以下是一个完整的实现方案。

前端实现

下载按钮组件
创建一个可复用的下载按钮组件，支持传入文件 URL 和文件名。

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

<script>
export default {
  props: {
    fileUrl: {
      type: String,
      required: true,
    },
    fileName: {
      type: String,
      required: true,
    },
  },
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = this.fileUrl;
      link.download = this.fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};
</script>

下载队列管理
使用 Vuex 或 Pinia 管理下载队列，记录下载状态（进行中、完成、失败）。

// store/modules/downloads.js
const state = {
  downloads: [],
};

const mutations = {
  ADD_DOWNLOAD(state, payload) {
    state.downloads.push({
      id: Date.now(),
      fileName: payload.fileName,
      status: 'pending',
      progress: 0,
    });
  },
  UPDATE_PROGRESS(state, { id, progress }) {
    const item = state.downloads.find(d => d.id === id);
    if (item) {
      item.progress = progress;
    }
  },
  COMPLETE_DOWNLOAD(state, id) {
    const item = state.downloads.find(d => d.id === id);
    if (item) {
      item.status = 'completed';
    }
  },
};

进度显示
在组件中显示下载进度和状态。

vue实现下载管理

<template>
  <div v-for="download in downloads" :key="download.id">
    <span>{{ download.fileName }}</span>
    <span>{{ download.status }}</span>
    <progress :value="download.progress" max="100"></progress>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['downloads']),
  },
};
</script>

后端实现

文件下载接口
后端提供文件下载接口，支持分片下载和进度返回。

// Node.js Express 示例
app.get('/download/:fileId', (req, res) => {
  const filePath = path.join(__dirname, 'files', req.params.fileId);
  const stat = fs.statSync(filePath);
  const fileSize = stat.size;
  const range = req.headers.range;

  if (range) {
    const parts = range.replace(/bytes=/, '').split('-');
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    const chunksize = end - start + 1;
    const file = fs.createReadStream(filePath, { start, end });
    const head = {
      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunksize,
      'Content-Type': 'application/octet-stream',
    };
    res.writeHead(206, head);
    file.pipe(res);
  } else {
    const head = {
      'Content-Length': fileSize,
      'Content-Type': 'application/octet-stream',
    };
    res.writeHead(200, head);
    fs.createReadStream(filePath).pipe(res);
  }
});

下载状态管理
后端可以记录用户的下载历史，支持断点续传。

vue实现下载管理

// 记录下载进度
app.post('/download/progress', (req, res) => {
  const { userId, fileId, progress } = req.body;
  // 存储到数据库
  db.updateDownloadProgress(userId, fileId, progress);
  res.sendStatus(200);
});

高级功能

并发下载控制
限制同时下载的文件数量，避免浏览器性能问题。

// 使用队列控制并发
class DownloadQueue {
  constructor(maxConcurrent = 3) {
    this.queue = [];
    this.active = 0;
    this.maxConcurrent = maxConcurrent;
  }

  add(task) {
    this.queue.push(task);
    this.run();
  }

  run() {
    while (this.active < this.maxConcurrent && this.queue.length) {
      const task = this.queue.shift();
      this.active++;
      task().finally(() => {
        this.active--;
        this.run();
      });
    }
  }
}

断点续传
实现断点续传需要前后端配合，记录已下载的字节范围。

// 前端记录下载范围
const downloadedBytes = localStorage.getItem(`download_${fileId}`) || 0;
const headers = { Range: `bytes=${downloadedBytes}-` };

fetch(fileUrl, { headers })
  .then(response => {
    const totalBytes = response.headers.get('Content-Range').split('/')[1];
    // 更新进度
    const reader = response.body.getReader();
    // ...
  });

下载加密文件
如果需要加密传输，可以使用 Web Crypto API。

async function decryptDownload(encryptedData, key) {
  const decrypted = await window.crypto.subtle.decrypt(
    { name: 'AES-GCM' },
    key,
    encryptedData
  );
  return new Blob([decrypted]);
}