uniapp上传音频文件到服务器

视频教程地址：

【uniapp录音上传组件，将录音上传到django服务器】 https://www.bilibili.com/video/BV1wi4y1p7FL/?share_source=copy_web&vd_source=e66c0e33402a09ca7ae1f0ed3d5ecf7c

• uniapp 录制音频文件上传到django服务器保存到服务器 ，要求uniapp显示录制进度波形图 请提供完整代码

• 以下是一个示例代码，演示了如何在uniapp中录制音频文件并将其上传到Django服务器，并在uniapp中显示录制进度波形图。

  在uniapp的页面中，你可以使用uni-voice组件来录制音频，并使用uni-upload组件来上传文件。在Django服务器端，你可以使用Django的文件上传功能来保存音频文件。

  uniapp页面代码（index.vue）：

<template>
  <view class="container">
    <view class="waveform" :style="{ width: waveformWidth + 'px' }"></view>
    <view class="controls">
      <button @tap="startRecording" :disabled="isRecording">开始录制</button>
      <button @tap="stopRecording" :disabled="!isRecording">停止录制</button>
      <button @tap="uploadFile" :disabled="!recordedFile">上传文件</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      recordedFile: null,
      waveformWidth: 0,
      audioContext: null,
      audioRecorder: null,
      audioChunks: [],
    };
  },
  mounted() {
    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  },
  methods: {
    startRecording() {
      this.isRecording = true;
      this.audioChunks = [];
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then((stream) => {
          this.audioRecorder = new MediaRecorder(stream);
          this.audioRecorder.addEventListener('dataavailable', (event) => {
            this.audioChunks.push(event.data);
            this.drawWaveform();
          });
          this.audioRecorder.start();
        })
        .catch((error) => {
          console.error('Error accessing microphone:', error);
        });
    },
    stopRecording() {
      this.isRecording = false;
      this.audioRecorder.stop();
      this.audioRecorder.stream.getTracks().forEach((track) => track.stop());
      this.audioRecorder = null;
      this.recordedFile = new File(this.audioChunks, 'recorded_audio.wav', { type: 'audio/wav' });
    },
    drawWaveform() {
      const waveformElement = this.$refs.waveform;
      const canvas = waveformElement.getContext('2d');
      const width = waveformElement.width;
      const height = waveformElement.height;
      const data = new Uint8Array(this.audioChunks.reduce((acc, chunk) => acc + chunk.byteLength, 0));
      let offset = 0;