ホームページ >ウェブフロントエンド >uni-app >ファイルのダウンロードとアップロードに関する UniApp の設定と使用ガイド
ファイルのダウンロードとアップロードを実装するための UniApp 構成および使用ガイド
1. はじめに
モバイル アプリケーション開発では、ファイルのダウンロードとアップロードは非常に一般的な機能です。クロスプラットフォームのモバイル アプリケーション開発フレームワークとして、UniApp は、開発者がファイルのダウンロードおよびアップロード機能を実装しやすくするための対応するインターフェイスも提供します。この記事では、UniApp フレームワークでのファイルのダウンロードおよびアップロード機能の設定方法と使用方法を紹介します。
2. 設定
Import Plug-in
を選択します。プラグイン ストアで file
を検索し、file
プラグインを見つけてインポートします。インポートが成功すると、プロジェクトのルート ディレクトリの unpackage
ディレクトリに uniCloud-aliyun
フォルダが表示されます。 (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 ツールで、
"provider": "aliyun", "aliyun": { "accessKeyId": "your-access-key-id", "accessKeySecret": "your-access-key-secret", "bucket": "your-bucket-name", "region": "your-region" }
(2)
manifest.jsonノードの下に次のコードを追加します。 ##
'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" } }
uniCloud 機能の設定
common
フォルダーを開き、## という名前のファイルを作成します。 #uploadFileuni.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; } }
以上がファイルのダウンロードとアップロードに関する UniApp の設定と使用ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。