uni-app 音频上传功能如何实现

在 uni-app 中实现音频上传功能，通常需要结合前端页面和后端接口来完成。以下是一个基本的实现案例，包含前端页面和后端接口接收文件的简要示例。

前端（uni-app）

1. 页面布局：使用 uni-ui 或者自定义组件来布局上传按钮和显示上传进度。

<template>
  <view>
    <button @click="chooseAudio">选择音频</button>
    <view v-if="audioPath">
      <text>已选择音频: {{ audioPath }}</text>
      <button @click="uploadAudio">上传音频</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioPath: ''
    };
  },
  methods: {
    chooseAudio() {
      uni.chooseMessageFile({
        count: 1,
        type: 'audio',
        extension: ['mp3', 'wav'],
        success: (res) => {
          this.audioPath = res.tempFiles[0].path;
        }
      });
    },
    uploadAudio() {
      uni.uploadFile({
        url: 'https://your-backend-api/upload', // 后端接口地址
        filePath: this.audioPath,
        name: 'file',
        formData: {
          user: 'test'
        },
        success: (uploadFileRes) => {
          console.log('上传成功：', uploadFileRes.data);
        },
        fail: (err) => {
          console.error('上传失败：', err);
        }
      });
    }
  }
};
</script>

后端（以Node.js为例）

1. 后端接口：使用 express 和 multer 中间件来接收文件上传。

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const port = 3000;

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

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send({ message: 'File uploaded successfully', file: req.file });
});

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

总结

以上代码展示了如何在 uni-app 中实现音频文件的选择和上传，以及后端如何使用 express 和 multer 来接收和处理上传的文件。请确保在实际项目中，根据需求调整接口地址、文件存储路径等配置，并增加必要的错误处理和安全性措施。