Cara menggunakan Vue untuk melaksanakan fungsi rakaman APP dan fungsi muat naik

Dalam beberapa tahun kebelakangan ini, dengan populariti aplikasi mudah alih, permintaan untuk rakaman suara dan muat naik semakin meningkat dari hari ke hari. Dalam rangka kerja Vue, digabungkan dengan ciri baharu HTML5, kami boleh melaksanakan fungsi rakaman APP dan memuat naiknya dengan mudah. Artikel ini akan berkongsi cara menggunakan Vue untuk melaksanakan fungsi rakaman APP dan memuat naiknya, supaya anda boleh melaksanakan fungsi rakaman dan muat naik suara dengan mudah.

1. Prasyarat

Pertama sekali, kita perlu menjelaskan dengan jelas bahawa fungsi rakaman perlu menggunakan ciri baharu HTML5, jadi sebelum melaksanakan fungsi rakaman, kita perlu menyemak seks keserasian pelayar.

Pada tahun 2019, kebanyakan penyemak imbas mudah alih sudah menyokong ciri baharu HTML5, tetapi masih terdapat beberapa penyemak imbas yang tidak serasi. Dalam aplikasi praktikal, kami boleh menggunakan perpustakaan Modernizr untuk menyemak sama ada penyemak imbas menyokong ciri HTML5 baharu.

2. Langkah pelaksanaan

1. Mengkonfigurasi persekitaran

Sebelum memasang Vue, kami perlu memasang Node.js dan NPM. Selepas pemasangan selesai, buka alat baris arahan dan laksanakan arahan berikut untuk memasang Vue-cli:

npm install -g vue-cli

Selepas pemasangan selesai, kita boleh menggunakan arahan berikut untuk mencipta projek Vue baharu:

vue init webpack my-project

Antaranya, "projek saya" ialah nama projek, yang boleh ditakrifkan oleh pengguna. Seterusnya, ikuti langkah yang digesa oleh baris arahan untuk mengkonfigurasinya.

2. Memasang kebergantungan

Selepas mencipta projek Vue, kami perlu memasang beberapa kebergantungan yang diperlukan, termasuk vue-audio-recorder dan axios. Mula-mula, kita perlu memasang vue-audio-recorder menggunakan arahan berikut:

npm install vue-audio-recorder --save

Kemudian, gunakan arahan berikut untuk memasang axios:

npm install axios --save

Dua kebergantungan di atas adalah untuk melaksanakan fungsi rakaman dan muat naik mesti dipercayai.

3. Tulis kod

Selepas melengkapkan konfigurasi persekitaran dan pemasangan pergantungan, kita perlu menulis kod untuk melaksanakan fungsi rakaman. Mula-mula, import kod berikut dalam komponen Vue:

import AudioRecorder from 'vue-audio-recorder'
import axios from 'axios'

Kemudian, tentukan keadaan berikut dalam komponen Vue:

data() {
  return {
    audioSrc: '',
    audioName: ''
  };
}

di mana, audioSrc mewakili alamat pautan bagi rakaman, audioName ialah nama fail rakaman.

Seterusnya, tulis kod berikut dalam komponen Vue untuk melaksanakan rakaman:

mounted() {
  this.audioRecorder = new AudioRecorder({
    onComplete: (blob)=>{
      // 上传录音文件
      this.uploadAudio(blob);
    },
  });
},
methods: {
  startRecord() {
    this.audioRecorder.start();
  },
  stopRecord() {
    return this.audioRecorder.stop()
        .then((blob) => {
          // 保存录音blob对象到变量中
          this.audioBlob = blob;
          // 设置录音链接地址
          this.audioSrc = URL.createObjectURL(blob)
        })
        .catch(() => {
          console.log('Media recording failed');
        });
  },
  uploadAudio(audioFile) {
    var formData = new FormData();
    formData.append("audio", audioFile, this.audioName);

    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      console.log(response.data);
      if (response.status == 200) {
        console.log("上传成功");
      } else {
        console.log("上传失败");
      }
    }).catch(() => {
      console.log("网络异常");
    })
  }
}

Antaranya, audioRecorder ialah objek rakaman, onComplete mewakili fungsi panggil balik selepas rakaman selesai, startRecord ialah fungsi mula merakam, stopRecord ialah fungsi berhenti rakaman, dan fungsi uploadAudio digunakan untuk memuat naik fail rakaman.

Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi rakaman. Pengguna boleh menambah butang rakaman pada templat Vue, dan memanggil fungsi @click dalam acara startRecord butang untuk memulakan rakaman, dan memanggil fungsi stopRecord pada penghujung rakaman untuk menamatkan rakaman dan memuat naiknya.

3. Ringkasan

Melalui langkah di atas, kami boleh melaksanakan fungsi rakaman APP Vue dengan mudah dan memuat naiknya. Dengan menggunakan ciri baharu HTML5 dan rangka kerja Vue, kami boleh menyelesaikan tugas ini dengan mudah. Kunci pelaksanaan terletak pada penggunaan vue-audio-recorder perpustakaan dan axios kebergantungan, menjadikan keseluruhan proses mudah dan menyeronokkan.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan fungsi rakaman APP dan fungsi muat naik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!