vue实现音乐上传

Vue 实现音乐上传功能

音乐上传功能通常涉及前端界面交互、文件选择、上传进度显示以及后端接口对接。以下是基于 Vue 的实现方法：

前端界面设计

使用 Vue 的模板语法创建一个简单的上传界面，包含文件选择按钮和上传按钮：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="audio/*" />
    <button @click="uploadFile" :disabled="!file">上传</button>
    <div v-if="progress > 0">上传进度: {{ progress }}%</div>
  </div>
</template>

文件处理逻辑

在 Vue 组件中处理文件选择和上传逻辑：

<script>
export default {
  data() {
    return {
      file: null,
      progress: 0
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0]
    },
    async uploadFile() {
      if (!this.file) return

      const formData = new FormData()
      formData.append('music', this.file)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: progressEvent => {
            this.progress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
          }
        })
        console.log('上传成功:', response.data)
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

后端接口示例

虽然主要关注前端实现，但这里提供一个简单的 Node.js Express 后端示例：

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

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/api/upload', upload.single('music'), (req, res) => {
  res.json({ message: '文件上传成功', file: req.file })
})

app.listen(3000, () => console.log('服务器启动'))

进阶功能实现

添加文件类型验证和大小限制：

methods: {
  handleFileChange(e) {
    const file = e.target.files[0]
    const allowedTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg']
    const maxSize = 10 * 1024 * 1024 // 10MB

    if (!allowedTypes.includes(file.type)) {
      alert('请上传有效的音频文件')
      return
    }

    if (file.size > maxSize) {
      alert('文件大小不能超过10MB')
      return
    }

    this.file = file
  }
}

上传进度可视化

使用进度条组件提升用户体验：

<template>
  <div>
    <progress :value="progress" max="100"></progress>
  </div>
</template>

错误处理增强

完善错误处理机制，提供更友好的用户反馈：

async uploadFile() {
  try {
    // 上传逻辑
  } catch (error) {
    if (error.response) {
      switch (error.response.status) {
        case 413:
          alert('文件太大，请压缩后重试')
          break
        case 415:
          alert('不支持的音频格式')
          break
        default:
          alert('上传失败，请稍后重试')
      }
    } else {
      alert('网络错误，请检查连接')
    }
  }
}