当前位置：首页 > VUE

vue实现歌曲下载功能

2026-02-24 03:10:09VUE

实现歌曲下载功能的基本思路

在Vue中实现歌曲下载功能通常涉及前端和后端的配合。前端负责触发下载请求，后端处理文件流并返回给前端。以下是具体实现方法。

前端实现步骤

创建下载按钮并绑定事件：

<template>
  <button @click="downloadSong">下载歌曲</button>
</template>

<script>
export default {
  methods: {
    async downloadSong() {
      try {
        const response = await this.$axios.get('/api/download', {
          params: { songId: '123' },
          responseType: 'blob'
        })

        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'song.mp3')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } catch (error) {
        console.error('下载失败:', error)
      }
    }
  }
}
</script>

后端实现示例（Node.js）

使用Express框架处理下载请求：

const express = require('express')
const fs = require('fs')
const app = express()

app.get('/api/download', (req, res) => {
  const songId = req.query.songId
  const filePath = `./songs/${songId}.mp3`

  if(fs.existsSync(filePath)) {
    res.setHeader('Content-disposition', 'attachment; filename=song.mp3')
    res.setHeader('Content-type', 'audio/mpeg')

    const fileStream = fs.createReadStream(filePath)
    fileStream.pipe(res)
  } else {
    res.status(404).send('文件不存在')
  }
})

app.listen(3000)

安全注意事项

实现下载功能时需要考虑以下安全措施：

验证用户权限
限制下载频率
对文件路径进行严格校验防止目录遍历攻击
使用HTTPS协议传输敏感数据

性能优化建议

对于大文件下载可以考虑以下优化：

实现断点续传功能
添加下载进度显示
使用CDN加速文件分发
对常用文件进行预压缩

跨域问题处理

如果前后端分离部署可能需要处理跨域问题：

// 后端CORS配置示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET')
  next()
})

以上实现方案可以根据具体需求进行调整，核心是通过前端创建Blob对象和a标签触发下载，后端正确处理文件流响应。

vue实现歌曲下载功能