uniappを利用してファイルアップロード機能を実装する

uniapp は、vue.js フレームワークに基づくクロスプラットフォーム アプリケーション開発フレームワークであり、一度作成して複数のプラットフォームにデプロイする効果を実現できます。実際のアプリケーションでは、画像のアップロード、ビデオのアップロードなど、ファイルのアップロードが一般的な要件になります。この記事では、uniappを使用してファイルアップロード機能を実装する方法と具体的なコード例を詳しく紹介します。

ファイル アップロードの実装の基本的な考え方は、まずフロントエンドで選択したファイルをパッケージ化し、次にそれを処理のためにバックエンドに送信することです。 uniapp では、公式に提供されている uni.uploadFile メソッドを使用してファイルをアップロードできます。 uni.uploadFile メソッドでは、ローカル リソースをリモート サーバーにアップロードできます。アップロード プロセスでは、断片化されたアップロードを使用して、安定した信頼性の高いファイル アップロードを実現します。

ファイルアップロード機能を実装する前に、uniapp-cli 環境と対応する uniapp フレームワークのバージョンをインストールする必要があります。

次に、具体的なコードの実装を見てみましょう。

フロントエンド部分:

フロントエンドページでは、ファイルアップロードフォームとアップロードボタンを設定する必要があります。コードは次のとおりです:

1. HTML ページにファイル アップロード フォームを設定します:

<form>
  <input type="file" id="fileInput" multiple="multiple">
</form>

このうち、<input type="file"> タグはファイルのアップロード フォームを設定します。アップロード ボタンをクリックすると、システム ファイル選択ダイアログ ボックスが自動的に表示されます。

2. HTML ページにアップロード ボタンを設定します:

<button type="button" @click="uploadFile">上传</button>

ボタンに @click イベントを設定します。ユーザーがアップロード ボタンをクリックすると、 UploadFile# がトリガーされます。 ##アップロード操作を実行する関数。

3. JS ファイルに UploadFile 関数を記述します:

uploadFile() {
  uni.chooseImage({
    count: 1, // 可上传的图片数量，为1表示单张上传
    success: function (res) {
      uni.showLoading({
        title: "上传中，请稍候..."
      });
      uni.uploadFile({
        url: "http://localhost:8081/upload.php", // 上传接口地址
        filePath: res.tempFilePaths[0], // 上传文件的本地路径
        name: "uploadfile", // 上传文件对应的 key 值
        success: function (result) {
          uni.hideLoading();
          console.log(result);
          uni.showToast({
            title: "上传成功!",
            duration: 2000
          });
        }
      });
    }
  });
}

このうち、

uni.chooseImage はシステム アルバムと uni を開くために使用されます。 showLoading を使用します。 アップロード中にローディング ボックスを表示するには、uni.uploadFile を使用してファイルをアップロードするリクエストを送信します。

uni.uploadFile の特定のパラメータの概要:

url: アップロード インターフェイスのアドレス;
• filePath: ローカルアップロードされたファイルのパス ;
• name: アップロードされたファイルの名前の値、バックエンド インターフェイスはこのパラメータを受け取る必要があります;
• success: アップロードが成功した後のコールバック関数。

このようにして、フロントエンドのコードが完成します。

バックエンド部分:

バックエンドでは、アップロードされたファイル情報を処理する必要があります。ここでは、PHP 言語を例として、対応する処理ロジックを記述します。

1.アップロード処理用のupload.phpファイルを作成します:

<?php
  $uploaddir = './upload/'; //文件上传的目录，需要事先创建好
  $filename = $_FILES['uploadfile']['name']; // 获取上传文件的名称
  $uploadfile = $uploaddir . $filename;
  if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $uploadfile)) { //上传成功
    echo json_encode(array(
      'success' => true,
      'msg' => '上传成功！'
    ));
  } 
  else { //上传失败
    echo json_encode(array(
      'success' => false,
      'msg' => '上传失败！'
    ));
  }
?>

このうち、

move_uploaded_file関数は、一時ファイルを指定したディレクトリに移動するために使用します。ここにアップロードされたファイルは名前が変更されるため、元のファイル名を使用すると競合が発生する可能性があります。なお、アップロードディレクトリは事前にサーバー上に作成しておく必要があります。

2. アップロード リクエストを監視するバックエンド サーバーとして PHP サービスを開始します。 xampp または wampserver をローカルにインストールします。起動後、ブラウザに

localhost/xxx/upload.php と入力してアップロード サービスにアクセスします (xxx は、upload.php が保存されているフォルダーの場所です)。

これでバックエンド部分のコードが完成し、サーバーアドレス経由で指定したディレクトリにファイルをアップロードできるようになります。

概要:

この記事では、uniapp を使用してファイル アップロード機能を実装する具体的な手順を紹介します。これには主にフロントエンド部分とバックエンド部分が含まれます。フロントエンドを通じてファイル アップロード フォームとアップロード ボタンを設定し、JS ファイルにアップロード関数を記述します。バックエンドは PHP を使用してアップロード サービスを記述し、アップロード リクエストを監視し、指定されたディレクトリにファイルをアップロードします。フロントエンドがバックエンドにアップロード要求を送信するとき、uni.uploadFile メソッドを使用してファイルをアップロードすると、安定した信頼性の高いアップロード サービスを提供できます。

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