ファイルのダウンロードとアップロードに関する UniApp の設定と使用ガイド-uni-app-php.cn

ホームページ

ウェブフロントエンド

uni-app

ファイルのダウンロードとアップロードに関する UniApp の設定と使用ガイド

PHPz

Jul 06, 2023 pm 12:01 PM

ファイルのダウンロードとアップロードを実装するための UniApp 構成および使用ガイド

1. はじめに
モバイルアプリケーション開発では、ファイルのダウンロードとアップロードは非常に一般的な機能です。クロスプラットフォームのモバイルアプリケーション開発フレームワークとして、UniApp は、開発者がファイルのダウンロードおよびアップロード機能を実装しやすくするための対応するインターフェイスも提供します。この記事では、UniApp フレームワークでのファイルのダウンロードおよびアップロード機能の設定方法と使用方法を紹介します。

2. 設定

プラグインの追加
UniApp プロジェクトでファイルのダウンロードおよびアップロード機能を使用するには、最初にプラグインを設定する必要があります。 HBuilderX ツールを開き、プロジェクトのルートディレクトリを見つけて右クリックし、Import Plug-in を選択します。プラグインストアで file を検索し、file プラグインを見つけてインポートします。インポートが成功すると、プロジェクトのルートディレクトリの unpackage ディレクトリに uniCloud-aliyun フォルダが表示されます。
クラウドストレージの構成
UniApp プロジェクトでは、ファイルのダウンロードとアップロードはクラウドストレージを通じて実現できます。 UniApp は現在、Alibaba Cloud と Tencent Cloud のクラウドストレージサービスをサポートしています。この記事では、Alibaba Cloud を例として構成します。

(1) Alibaba Cloud アカウントを登録し、オブジェクトストレージサービスを購入します。
(2) HBuilderX ツールで、manifest.json ファイルを開き、uniCloud ノードの下に次のコードを追加します。 ##your -access-key-id

と

your-access-key-secret は、Alibaba Cloud アカウント your-bucket-name の AccessKey ID と AccessKey Secret です。はオブジェクトストレージのバケット名です。your-region はバケットが配置されているリージョンの番号です。 3. ファイルのダウンロード

uniCloud 機能の設定

(1) HBuilderX ツールで、

フォルダーを開き、## という名前のファイルを作成します。 #downloadFile
のクラウド機能。クラウド関数に次のコードを追加します:
```
"provider": "aliyun",
"aliyun": {
  "accessKeyId": "your-access-key-id",
  "accessKeySecret": "your-access-key-secret",
  "bucket": "your-bucket-name",
  "region": "your-region"
}
```
ログイン後にコピー
(2) manifest.json

uniCloudFunction

ノードの下に次のコードを追加します。 ##

'use strict';
const cloud = require('wx-server-sdk');
cloud.init()

exports.main = async (event, context) => {
  const fileID = event.fileID;
  const res = await cloud.downloadFile({
    fileID: fileID
  })
  return res.fileContent;
}

ログイン後にコピー

このうち、env-id は現在の環境 ID です。

ファイルをダウンロードファイルをダウンロードする必要があるページで、次のコードを使用してファイルをダウンロードします:

"downloadFile": {
    "path": "common/downloadFile",
    "ops": {
        "timeout": 30000,
        "env": "env-id"
    }
}

ログイン後にコピー

your-file-id
は、ダウンロードする必要があるファイルの ID です。

4. ファイルのアップロード

uniCloud 機能の設定

(1) HBuilderX ツールで、

common

フォルダーを開き、## という名前のファイルを作成します。 #uploadFile

uni.cloud.callFunction({
  name: 'downloadFile',
  data: {
    fileID: 'your-file-id'
  },
  success(res) {
    uni.showToast({
      title: '下载成功！'
      icon: 'success'
    })
    uni.saveFile({
      tempFilePath: res.result,
      success(res) {
        console.log('文件保存路径：', res.savedFilePath)
      }
    })
  },
  fail(err) {
    console.log('文件下载失败：', err)
  }
})

ログイン後にコピー

ファイルのアップロード

ファイルをアップロードする必要があるページで、次のコードを使用してファイルをアップロードします。

'use strict';
const cloud = require('wx-server-sdk');
cloud.init()

exports.main = async (event, context) => {
  try {
    const res = await cloud.uploadFile({
      cloudPath: event.cloudPath,
      fileContent: event.fileContent
    })
    return res.fileID;
  } catch (e) {
    console.error(e)
    return null;
  }
}

ログイン後にコピー

your-cloud-path