Uniapp に画像以外のファイルと音声ファイルをアップロードする方法

モバイル インターネットの発展に伴い、モバイル アプリケーションの開発はますます重要になり、ユニバーサル フレームワークの出現により、開発プロセスが大幅に簡素化されました。Vue.js に基づくクロスプラットフォーム開発フレームワークとしての Uniapp 、開発者の好意も高く評価されています。 Uniappでは写真や音声をとても便利にアップロードできますが、テキストや動画など他の種類のファイルをアップロードするにはどうすればよいですか?この記事では、Uniappで画像以外のファイルや音声ファイルをアップロードする方法を詳しく紹介します。

1. 準備

アップロードする前に、次の準備を行う必要があります:

1. manifest.json に権限を追加

We File の読み取り権限を追加します。 manifest.json ファイルに追加する必要があります。具体的な内容は次のとおりです:

{
    "mp-weixin": {
        "permission": {
            "scope.userLocation": {
                "desc": "读取文件时需要获取您的授权"
            }
        }
    }
}

2. Uniapp の uni-request ライブラリをインストールします

Uniapp はネットワークを提供しますrequest パッケージ化ライブラリは uni-request と呼ばれるもので、後で使用するために最初にインストールする必要があります。 HBuilderX では、次のコマンドを使用してインストールします:

npm install --save uni-request

ここでは、インストールする npm メソッドを選択します。もちろん、ローカルにダウンロードして静的ディレクトリの一部にして使用できるようにすることもできます。オフラインです。

2. ファイルのアップロード プロセス

1. ファイルの選択

まず、ポップアップできる組み込みの chooseFile メソッドを導入する必要があります。ファイル選択ボックス 。ユーザーはアップロードするファイルを選択できます。選択すると、このメソッドはファイル パスをコールバックします。

uni.chooseFile({
    count: 1, // 最多选择1个文件
    type: 'file', // 只允许选择文件
    success: function (res) {
        console.log(res.tempFiles[0].path);
        // 此处拿到文件路径传到下一步中
    }
});

2. ファイルの内容を取得する

次に、後でアップロードするために、選択したファイルを読み取る必要があります。ここでは、uni-request の post メソッドを使用し、ファイル パスをパラメータとして渡し、送信用のファイルを返します。

uni.chooseFile({
    count: 1,
    type: 'file',
    success: function (res) {
        uni.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].path,
            success: function (data) {
                uni.request({
                    url: 'http://yourpath/to/upload',
                    data: data.data,
                    method: 'post',
                    success: function (uploadRes) {
                        console.log(uploadRes);
                    }
                });
            }
        });
    }
});

ここで注意する必要があるのは、getFileSystemManager メソッドを使用してファイル システム マネージャーを取得し、そのマネージャーの下で readFile メソッドを使用してファイル システム マネージャーを読み取ったことです。最後に取得するのは Buffer オブジェクトです。 Buffer オブジェクトをパラメータとして直接渡す場合、サーバーはファイルを取得するために追加の操作を必要とする可能性があるため、アップロードする前にファイルをバイナリ ストリームに変換する必要があります。

3. Buffer オブジェクトをバイナリ ストリームに変換する

前のステップで、ファイルを読み取り、Buffer オブジェクトを取得しました。ただし、アップロードする前にバイナリ ストリームに変換する必要があります。ここでは、file-stream:

uni.chooseFile({
    count: 1,
    type: 'file',
    success: function (res) {
        uni.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].path,
            success: function (data) {
                const stream = require('file-stream').createReadStream(data.data);
                stream.on('data', function (chunk) {
                    uni.request({
                        url: 'http://yourpath/to/upload',
                        data: chunk,
                        method: 'post',
                        success: function (uploadRes) {
                            console.log(uploadRes);
                        }
                    });
                });
            }
        });
    }
});

などの既存のライブラリを使用できます。この方法で、Buffer オブジェクトをバイナリ ストリームに変換し、サーバーにアップロードできます。 file-stream ライブラリでは、createReadStream メソッドを使用してストリームを作成し、その後 on('data') を使用することに注意してください。データフラグメントの送信過程を監視し、最後にuni.requestのデータに渡すことでアップロードが完了します。

3. 概要

Uniapp で画像以外のファイルや録画ファイルをアップロードするには、ファイルの選択、ファイル内容の読み取り、バイナリ ストリームへの変換、サーバーへのアップロードなど、複数の手順が必要です。ただし、Uniapp と uni-request の API は非常に使いやすいため、プロセスは非常にシンプルかつ明確になります。

もちろん、multer などの他のライブラリを使用してファイルのアップロードを実装することもできます。使用中は、不要な問題を避けるために、データの流れと処理に注意を払う必要があります。

以上がUniapp に画像以外のファイルと音声ファイルをアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。