vue+element上传音频文件

你可以使用 Element UI 提供的 Upload 组件来实现音频文件上传功能。以下是一个简单的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/uploadAudio"
      :headers="{ Authorization: 'Bearer ' + token }"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :limit="1"
      :accept="'audio/*'"
      :show-file-list="false"
    >
      <el-button type="primary">点击上传音频文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: '',
    };
  },
  methods: {
    beforeUpload(file) {
      // 验证文件类型和大小
      const isAudio = file.type.startsWith('audio/');
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isAudio) {
        this.$message.error('只能上传音频文件');
      }

      if (!isLt10M) {
        this.$message.error('上传音频文件大小不能超过 10MB');
      }

      return isAudio && isLt10M;
    },
    onSuccess(response, file, fileList) {
      // 上传成功后的处理逻辑
      console.log('上传成功');
    },
    onError(error, file, fileList) {
      // 上传失败后的处理逻辑
      console.log('上传失败');
    },
  },
};
</script>

在上面的示例代码中，我们使用了 Element UI 的 Upload 组件来实现音频文件上传功能。其中，主要的配置项包括：

- `action`：上传文件的接口地址
- `headers`：上传请求的头部信息，需要传递用户的身份认证信息
- `before-upload`：上传前的钩子函数，用于验证文件类型和大小等信息
- `on-success`：上传成功后的回调函数
- `on-error`：上传失败后的回调函数
- `limit`：限制上传的文件数量为 1 个
- `accept`：限制上传的文件类型为音频文件
- `show-file-list`：不显示上传成功的文件列表，只显示上传按钮

需要注意的是，在上传文件时需要传递用户的身份认证信息，可以将用户的 token 存储在组件的 data 中，并在 headers 配置项中传递。另外，需要在上传前使用 before-upload 钩子函数验证文件类型和大小等信息，避免上传无效的文件。