アップロードSDK for WeChat miniプログラムを使用してファイルをアップロードする前に、SDKを統合する必要があります。 このトピックでは、WeChat miniプログラム用のアップロードSDKを統合し、SDKを使用してファイルをアップロードする方法について説明します。
ファイルのアップロード
アップロードSDK for WeChat miniプログラムを使用してファイルをアップロードするには、次の手順を実行します。
JavaScriptコードをインポートします。
アップロードURLとアップロード資格情報の取得またはアップロード認証用のSTSトークン。
アップロードSDK for WeChat miniプログラムは、次の2つのアップロード権限付与方法をサポートしています。
アップロード結果
取得したアップロードURLと資格情報、または取得したSTSトークンを使用して、アップロードインスタンスを初期化します。
アップロードURLと資格情報を使用するまたはアップロードインスタンスを初期化するためのSTSトークン。
アップロードインスタンスを初期化する前に、初期化コールバックを設定する必要があります。
VODUpload初期化コールバックを宣言する
表示コード
var uploader = new VODUpload({
// The ID of your Alibaba Cloud account. This parameter cannot be left empty. To view the ID of your Alibaba Cloud account, go to the Account Center (https://account.console.aliyun.com/) by using your Alibaba Cloud account.
userId:"25346073170691****",
// The ID of the region to which the file is uploaded. Default value: cn-shanghai. For more information about other region IDs such as eu-central-1 and ap-southeast-1, see Overview.
region:"cn-shanghai",
// The maximum number of attempts to retry the upload when a network error occurs. Default value: 3.
retryCount: 3,
// The interval at which you want the system to retry the upload when a network error occurs. Default value: 2. Unit: seconds.
retryDuration: 2,
// The callback that is invoked if the upload starts.
'onUploadstarted': function (uploadInfo) {
},
// The callback that is invoked if the upload is successful.
'onUploadSucceed': function (uploadInfo) {
},
// The callback that is invoked if the upload fails.
'onUploadFailed': function (uploadInfo, code, message) {
},
// The callback that is invoked if the default or custom upload progress is reached. The progress is measured in bytes.
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
},
// The callback that is invoked if the upload credential or STS token expires.
'onUploadTokenExpired': function (uploadInfo) {
},
// The callback that is invoked if the entire file is uploaded.
'onUploadEnd':function(uploadInfo){
}
});
アップロードインスタンスを初期化します。 アップロードURLとアップロード資格情報またはSTSトークンを使用して、ビジネス要件に基づいてアップロードインスタンスを初期化できます。
(推奨) アップロードURLと資格情報の使用
アップロードの開始時に呼び出されるonUploadStartedコールバックのsetUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId); メソッドを呼び出して、取得したアップロードURLと認証情報を指定します。
説明 アップロード資格情報の有効期限が切れると、onUploadTokenExpiredコールバックが呼び出されます。 resumeUploadWithAuth(uploadAuth) メソッドを呼び出して、新しいアップロード資格情報を使用してアップロードを再開します。
表示コード
// Start the upload.
// The uploadInfo object specifies the information about the file that you want to upload.
// {
// videoId: '', // The video or audio ID that is returned by the server.
// Endpoint: '', // The public Object Storage Service (OSS) endpoint.
// Bucket: '', // The OSS bucket.
// Object: '' // The basic storage unit in OSS.
// }
'onUploadstarted': function (uploadInfo) {
// The upload method. You must call different methods to obtain the upload URL and credential, depending on whether the uploadInfo.videoId parameter has a value. The upload SDK obtains the value of the uploadInfo.videoId parameter from the local storage.
// If the uploadInfo.videoId parameter has a value, call the RefreshUploadVideo operation. Otherwise, call the CreateUploadVideo operation.
// If the video that is being uploaded is deleted from the ApsaraVideo VOD console, a conflict occurs. Specifically, the video ID does not exist in the ApsaraVideo VOD console but exists in the browser. In this case, the InvalidVideo.NotFound error message is reported. You must clear the local storage.
var url = '';
if (uploadInfo.videoId) {
// If the uploadInfo.videoId parameter has a value, call the RefreshUploadVideo operation.
url = 'refreshUrl'; // The URL of the application server.
}
else{
// If the uploadInfo.videoId parameter does not have a value, call the CreateUploadVideo operation.
url = 'createUrl'; // The URL of the application server.
}
// The following sample code shows how to resume the upload by using the new upload credential.
// The methods used to obtain the upload credential, upload URL, and video ID differ based on the application server.
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId);
});
},
// The callback that is invoked if the upload credential expires.
'onUploadTokenExpired': function (uploadInfo) {
// During implementation, call the RefreshUploadVideo operation to obtain a new upload credential based on the uploadInfo.videoId parameter.
// Set the uploadAuth parameter to the new upload credential obtained from ApsaraVideo VOD in the SDK.
var url = 'refreshUrl'; // The URL of the application server.
// The following sample code shows how to resume the upload by using the new upload credential.
// The methods used to obtain the upload credential, upload URL, and video ID differ based on the application server.
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.resumeUploadWithAuth(data.UploadAuth);
});
},
STSトークンの使用
アップロードの開始時に発生するonUploadStartedコールバックのsetSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken); メソッドを呼び出して、取得したSTSトークンを指定します。
説明 STSトークンの有効期限が切れると、onUploadTokenExpiredコールバックが呼び出されます。 resumeUploadWithSTSTSToken (accessKeyId, accessKeySecret, secretToken); メソッドを呼び出して、新しいSTSトークンを使用してアップロードを再開します。
表示コード
onUploadstarted: function (uploadInfo) {
// If you use the STS token, call the uploader.setUploadAuthAndAddress method.
var stsUrl = 'stsUrl';
// The following sample code shows how to resume the upload by using the new STS token.
// The methods used to obtain the AccessKey ID, AccessKey secret, and STS token differ based on the application server.
fetch(stsUrl)
.then((res) => res.json())
.then((data) => {
var info = data.SecurityTokenInfo
uploader.setSTSToken(uploadInfo, info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
});
},
onUploadTokenExpired: function (uploadInfo) {
// If the STS token expires, you must obtain a new STS token to resume the upload.
// If the file to be uploaded is large in size, the STS token may expire during the upload. In this case, you must call the resumeUploadWithSTSToken method in the onUploadTokenExpired callback to resume the upload by using a new STS token.
var stsUrl = 'stsUrl';
// The following sample code shows how to resume the upload by using the new STS token.
// The methods used to obtain the AccessKey ID, AccessKey secret, and STS token differ based on the application server.
fetch(stsUrl)
.then((res) => res.json())
.then((data) => {
var info = data.SecurityTokenInfo
uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
});
},
アップロードするファイルの種類に基づいて、アップロードパラメーターを設定します。 ファイルは、オーディオファイル、ビデオファイル、または画像ファイルです。
オーディオおよびビデオファイルのアップロードパラメーター
オーディオまたはビデオファイルをアップロードリストに追加するためのアップロードパラメーターを設定します。
wx.chooseVideo({
success: function (res) {
var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
var userData = '{"Vod":{}}';
uploader.addFile(file, null, null, null, userData)
}
})
アップロード中に、paramDataを使用してオーディオおよびビデオ情報をカスタマイズできます。 paramDataはJSON文字列です。 最初のレイヤーでVodを設定する必要があります。 paramDataがサポートする属性をVod内に追加します。 サポートされる属性の詳細については、「CreateUploadVideo」をご参照ください。 サンプルコード：
var userData = '{"Vod":{"Title":"test","CateId":"234"}}';
画像ファイルのアップロードパラメーター
画像ファイルをアップロードリストに追加するためのアップロードパラメーターを設定します。
wx.chooseImage({
success: function (res) {
var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
var userData = '{"Vod":{}}';
uploader.addFile(file, null, null, null, userData)
}
})
アップロードを開始します。
startUpload()メソッドを呼び出してアップロードを開始します。
アップロードが開始されると、onUploadProgressコールバックを呼び出して、アップロードの進行状況を同期します。
ファイルがアップロードされると、onUploadSucceedコールバックが呼び出され、アップロード結果が返されます。
アップロード結果
ビデオがアップロードされると、ビデオIDを示すvideoIdパラメータが返されます。 次に、ビデオIDに基づいてストリーミングURLを取得し、ビデオを再生できます。 詳細については、「再生資格情報を使用したビデオの再生」をご参照ください。
イメージがアップロードされると、imageUrlパラメーターが返されます。 imageUrlパラメーターの値は、イメージURLを示します。 URL署名が有効になっている場合、イメージURLは特定の期間後に期限切れになります。 詳細については、「URL署名の設定」をご参照ください。
アップロードリストの管理
アップロードするファイルを削除します。
indexパラメーターは、listFilesメソッドによって返されるリスト内のファイルのインデックスを示します。
uploader.deleteFile(index);
1つのファイルのアップロードをキャンセルします。
uploader.cancelFile(index);
説明 この方法を使用して、アップロード中またはアップロード待ちのファイルのアップロードをキャンセルできます。
1つのファイルのアップロードを再開します。
uploader.resumeFile(index);
アップロードリストを照会します。
uploader.listFiles();
アップロードリストをクリアします。
uploader.cleanList();
アップロード資格情報またはSTSトークンの管理
アップロード資格情報の有効期限が切れたら、アップロードを再開します。
uploader.resumeUploadWithAuth(uploadAuth);
アップロードURLと資格情報を指定します。
onUploadstartedコールバックでアップロードURLと資格情報を設定します。 uploadInfoはコールバックに含まれます。
uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId);
STSトークンを指定します。
onUploadstartedコールバックでSTSトークンを指定します。 uploadInfoはコールバックに含まれます。
uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
STSトークンの有効期限が切れた後、アップロードを再開します。
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);