uniappでローカルアップロードオーディオ機能を実装する方法

近年、モバイルインターネットの発展と普及に伴い、さまざまなアプリケーションが誕生していますが、その中でもオーディオアプリケーションは爆発的な成長傾向を示しています。 Changba や Maisong などのハンドヘルド KTV アプリケーションは、若者のレジャーやエンターテイメントにおける重要な選択肢となっています。ただし、アプリケーションのほとんどのオーディオ機能では、共有やオンデマンド再生などの機能を実現するために、オーディオ ファイルをサーバーにアップロードする必要があります。これに関連して、この記事では、uniapp でオーディオのローカルアップロード機能を実装する方法を紹介します。

uniapp は、iOS、Android、H5 などのさまざまなプラットフォーム用のアプリケーションにプログラムを一度にコンパイルすることをサポートするクロスプラットフォーム開発フレームワークです。そこで、この記事ではuniappをベースに音声をローカルにアップロードする方法を紹介します。

まず、サードパーティのプラグイン --uni-upload-file を uniapp にインストールする必要があります。このプラグインは、フロントエンドからサーバーにファイルを直接アップロードするコンポーネントです。これにより、比較的高速で便利なファイルのアップロードが実現します。このプラグインを使用するには、uniapp プロジェクトのルート ディレクトリに npm コマンドでプラグインをインストールする必要があります。実行コードは次のとおりです。

npm install --save uni-upload-file

その後、オーディオをアップロードする必要があるページで、uniapp が提供するイベント バインディング メカニズムを通じてファイル アップロード機能を実装できます。コード例は次のとおりです。

import uniUploadFile from '@/components/uni-upload-file/uni-upload-file.vue'

上記のコードでは、uni -upload-file コンポーネントを使用してファイルのアップロードを完了します。

@complete

イベントは、ファイルのアップロード完了後のコールバック関数であり、次のことができます。この関数でアップロード結果を取得します。 さらに、このプラグインを使用するときは、通常、ファイルのアップロード アドレス、つまりファイルを指す

source

属性を指定する必要があることに注意する必要があります。アップロードインターフェイス。したがって、サーバー側でファイルアップロードインターフェイスを作成する必要があります。 サーバー側コードの場合は、任意のバックエンド言語を使用して実装でき、インターフェイスにファイル アップロード機能を実装するだけで済みます。私の場合、Node.js と Express フレームワークを使用してファイル アップロードを実装しています。実装コードは次のとおりです:

<template>
  <view>
    <input type="file" @change="onFileChange">
    <uni-upload-file :source="source" @complete="onUploadComplete"></uni-upload-file>
  </view>
</template>

<script>
import uniUploadFile from '@/components/uni-upload-file/uni-upload-file.vue'

export default {
  components: {
    uniUploadFile
  },
  data () {
    return {
      source: '' // 文件上传地址
    }
  },
  methods: {
    onFileChange (event) {
      // 选择要上传的音频文件
      let file = event.target.files[0]
      this.$refs.upload.upload(file)
    },
    onUploadComplete (data) {
      // 文件上传完成后的回调
      console.log('upload complete', data)
    }
  }
}
</script>

上記のコードでは、multer プラグインを使用してファイル アップロード機能を実装しています。インターフェイス アドレスは

/upload

、アップロードされたファイルのフィールド名は audio、アップロード完了後にファイル名がクライアントに応答されます。 最後に、オーディオをローカルにアップロードする機能を実現するために、フロントエンドの

source

属性にファイルのアップロード アドレスを入力する必要があります。 概要

この記事では、uniapp でオーディオをローカルにアップロードする機能を実装する方法について詳しく説明します。 uni-upload-file プラグインを導入し、

@complete

イベントをバインドし、バックエンドによって提供されるファイル アップロード インターフェイスを使用することで、ファイル アップロード機能が完全に実現されます。この記事が音声ファイルをアップロードする必要がある開発者に役立つことを願っています。

以上がuniappでローカルアップロードオーディオ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。