1. 背景:
最近、バックグラウンド管理システムにビデオをアップロードする機能を追加する必要がありますが、このビデオのアップロードはサーバーへのアップロードとは異なり、フロントエンドによって Alibaba Cloud VOD にアップロードする必要があり、Alibaba Cloud を介してアップロードする必要があります。クライアントSDK。
2. Ali Cloud JS SDK アップロードビデオ VOD
公式 Web サイトのドキュメント: https://www.alibabacloud.com/help/zh/apsaravideo-for-vod/latest/use-the-upload-sdk-for-javascript
このドキュメントでは、次の 2 つのアップロード方法が提供されています。ビジネス ニーズ アップロード アドレスと証明書の方法または STS 方法を使用して、サーバーがアップロード アドレスと証明書をフロントエンドに返す方法を選択します。
3. 実装:
前提: アップロード承認、アップロード アドレスと資格情報を取得する必要があり、バックエンド アクセスが必要です。ここでは、サーバー側の実装ではなく、フロントエンドの実装に焦点を当てます。つまり、バックエンドに次のことを要求するだけです。これら2つを取得するためのインターフェースを提供してください~
1.JavaScriptアップロードSDKの導入
// 方式一 : 在HTML中通过script引用
<!-- IE需要es6-promise，目前支持IE 10及以上 -->
<script src="../lib/es6-promise.min.js"></script>
<script src="../lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="../aliyun-vod-upload-sdk-1.5.5.min.js"></script>
// 方式二 : 模块化引用
import OSS from '../lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min'
window.OSS = OSS;
import '../lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.5.min'
2. 初期化コールバックを宣言する
var uploader = new AliyunUpload.Vod({
//userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
userId:"122",
//上传到视频点播的地域，默认值为'cn-shanghai'，
//eu-central-1，ap-southeast-1
region:"",
//分片大小默认1 MB，不能小于100 KB（100*1024）
partSize: 1048576,
//并行上传分片个数，默认5
parallel: 5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3,
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2,
// 添加文件成功
addFileSuccess: function() {
console.log('添加文件成功')
// 添加文件成功后调起开始上传
uploader.startUpload()
},
//开始上传
'onUploadstarted': function (uploadInfo) {
// 上传方式，需要根据uploadInfo.videoId是否有值（该值由SDK通过localstorage获取），调用 视频点播的不同接口获取uploadauth和uploadAddress
// 如果videoId有值，调用刷新音视频上传凭证接口，否则调用获取音视频上传地址和凭证接口
// 上传过程中，如果在点播控制台删除了音频或视频，即videoId不存在了，则会产生冲突，会出现控制台不存在videoId，而浏览器存在videoId的情况，报InvalidVideo.NotFound错误。此时，需手动清除localstorage
var url = '';
if (uploadInfo.videoId) {
//如果uploadInfo.videoId存在，调用刷新音视频上传凭证接口
url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
}
else{
//如果uploadInfo.videoId不存在，调用获取音视频上传地址和凭证接口
url = 'createUrl'; // 此处URL需要替换为服务端AppServer对应的地址
}
// 以下请求实现为示例，用于演示设置凭证
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId);
});
},
//文件上传成功
'onUploadSucceed': function (uploadInfo) {
//uploadInfo 包含要上传的文件信息
// {
// videoId: '', // videoId，由服务端返回的音/视频ID
// Endpoint: '', // OSS对外服务的访问域名
// Bucket: '', // OSS存储空间
// Object: '' // OSS存储数据的基本单元
// }
console.log(uploadInfo) // 此处可以获取到上传后的vod
},
//文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
},
//文件上传进度，单位：字节
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
},
//上传凭证或STS token超时
'onUploadTokenExpired': function (uploadInfo) {
//实现时，根据uploadInfo.videoId调用刷新音视频上传凭证接口重新获取UploadAuth
//从点播服务刷新的uploadAuth，设置到SDK里
var url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
// 以下请求实现为示例，用于演示设置凭证
// 获取UploadAuth, UploadAddress, VideoId可能因AppServer实现有差异
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.resumeUploadWithAuth(data.UploadAuth);
});
},
//全部文件上传结束
'onUploadEnd':function(uploadInfo){
}
});
説明:
1) 私のバックグラウンド システムは antd pro で書かれているため、ロジック コードは model.js で書かれています。上記のドキュメントのデモに従って onUploadstarted などのフックで認証情報とアドレスを要求すると、非同期エフェクトで書かれているためです。関数のフック内で使用します yield キーワードで非同期リクエストを行うとエラーが報告されキーワードが使用できないため、プロジェクトではまず証明書とアドレスの取得をリクエストしてからインスタンスを初期化します現時点では、アップロードは正常に実行できますが、デモで説明されているアップロード証明書がタイムアウトした場合、または資格情報の更新と取得を区別する必要があるその他の状況では、これでは十分ではありません。
2) ドキュメントの前提条件には、ファイルの選択には標準入力メソッドを使用することが推奨されていると記載されています。私のプロジェクトでは、**ant design の <Upload />** アップロード コンポーネントを使用しました。入力を使用しようとしましたが、 onchange イベントはファイル オブジェクトを取得できませんでした (onUploadstarted フックはファイル オブジェクトを渡す必要があります)。あきらめます。
3. 選択したファイルをアップロードリストに追加し、アップロードを開始します
uploader.addFile(file,null,null,null,'{"Vod":{}}');
4. 発生した問題:
1. エラー - 不正な呼び出し
このプロセスで遭遇する最大の落とし穴はこれです。ファイルを追加するときにトーストがポップアップ表示され、「不正な呼び出し」が報告されますが、コンソールにはエラーが報告されません。いくつかの調査の結果、ファイルを追加するときにファイル オブジェクトが間違っていることがわかりました。ビデオをアップロードしているのでめまいがします~
最後に、ファイル オブジェクトがいくつかの処理を受け、<Upload /> によってアップロードされたファイル オブジェクトが別のオブジェクトにカプセル化されます。VOD をアップロードするとき、addFile() は処理後にファイル オブジェクトを追加します取得した元のファイル オブジェクトが渡されるため、極秘の不正呼び出しエラーが発生します
2. ビデオ URL をファイル アップロード コンポーネントに書き戻します。
VOD にアップロードした後、現時点で取得できるのは videoId だけであり、アップロードされたビデオ コンポーネントのリストには、「ビデオ」をクリックしてビデオを開く機能があるため、サーバーにリクエストしてサポートする必要があります。この VOD を通じてビデオの URL を返します ビデオがオンになっています。
これには動画アップロードコンポーネントのロジックが関係するので、実装方法についてはまた別の記事で解説する予定です。ここでは逆の操作が必要なため、fileList レンダリング リストが逆になります。
5.アップロード成功エフェクト
6.最後に書く
ここでは最も単純な VOD アップロードのみが行われ、ドキュメント内のタイムアウトやその他のシナリオ、その他の高度なアプリケーションは含まれていないため、問題が発生した場合はドキュメントを読んでください~ ちなみに、本当に解決できない場合は、 Alibaba Cloud に作業指示書を送信して支援を求めることができます。~