、Qiniu-のJavaScript SDKの紹介
JS-SDKに基づいて簡単に7頭の牛のクラウドストレージにブラウザの端からファイルをアップロードすることができ、およびデータ処理動作の成功富の後に写真をアップロードします。
JS-SDK支持H5ファイルAPI対応のブラウザは、ブラウザの低いバージョンでは、そのようなpluploadなどの追加プラグインの必要性は、JS-SDKは、インターフェイスの数が仕事をアップロードするプラグインと組み合わせることができる提供します。
クライアントSDKのQiniu-のJavaScript-SDK、含まれていません token 達成するための世代を、安全のために、token 我々は、ネットワークを介してサーバから取得し、生成されたコードは、特定の文書サーバのSDKを参照することができますお勧めします。
1、参考資料
公式APIドキュメント：JavaScriptのSDK
ベースのフロントエンドのJavaScript SDKソースアドレス7頭の牛のAPIの開発：https://github.com/qiniu/js-sdk
図2に示すように、導入された（NPMがインストール）
NPMは、ノードパッケージマネージャをスタンドで NodeJSの パッケージ管理と配布ツール、標準の公表ノードモジュール（パッケージ）が非公式であるとなっています。
$ NPM インストール qiniu-JSを
二、JavaScriptのプロジェクトの実現
アップロードコンポーネントを7頭の牛を作成します。hsedu_mgr / SRC /コンポーネント/チャート/ QiniuUpload.vue
次のコードは、アップロードの進行状況バーを統合し、アップロードが完了するよう求め
</ DIV>
<DIV CLASS = "precent" V- なら = "パーセント> 0 &&パーセント<100">
{{パーセント || 0}}％
</ div>
</ DIV>
<DIV CLASS = "ファイル名" V- なら = "パーセント== 100"> {{fileNameを}} </ div>
の<input type = "ファイル" REF = "evfile"変化= "zh_uploadFile_change @ "スタイル="表示：なし">
の<input type ="隠された"：値= "qiniuKey">
</ div>
</テンプレート>
<スクリプト>
輸入 qiniu-JSからqiniuとして* ""
輸出のデフォルト{
名： " QiniuUpload」、
小道具：{ // 子组件的小道具选项
qiniuUploadDesc：{
タイプ：文字列、
デフォルト： '上传文件'
}、
classroomUpload：{
デフォルト： '未知の教室'
}、
ファイルタイプ：{
タイプ：文字列
}、
showProgress：{
タイプ：ブール値、
デフォルト：偽
}、
boxClass：{
タイプ：文字列
デフォルト： ''
}
}、
データ（）{
リターン{
queryInfo：{
限界： 10 、
オフセット： 0 、
}、
トークン： "" 、
qiniuKey： "" 、
パーセント： 0 、
percentText： '' 、
ファイル名： ''
}
}、
メソッド：{
httpGetList：関数（）{
VARの自己= この;
この $ HTTPGET（。この $ HTTP、 "ユーザー/ dataController / getUploadToken"、。この $ trimJson（self.queryInfo）、。機能（RET）{
はconsole.log（ 'RET' 、ret.token）;
戻りret.token ;
}）;
}
// 选择上传文件
zh_uploadFile（）{
この$のrefs.evfile.click（）。
}、
//ファイルを選択しますトリガーイベント
zh_uploadFile_change（evfile）{
IF （evfile）{
// 取得した後は、トークン
この（.getQiniuToken）を、次いで（RES => {
にconsole.log（ 'RES' 、RES）;
VAR =のuptoken RES;
VARの userNo = この$。 。sessionUser.fetch（）userNo;
VARのタイムスタンプ= Date.parse（新しい新しい日付（））; // タイムスタンプ
のvarファイルevfile.target.files = [0]; // Blobオブジェクトファイルのアップロード
このは.filename = ファイルを.nameの、
VaRのキー= この .filetype + '/' + この .classroomUpload + '/ U-' + userNo + 'T' + + + file.name.splitタイムスタンプ（ ' '）POP（）'。' ;. // リソースファイルをアップロードキーがnullまたは未定義の場合、メインキーを設定するための名前、リソース・ファイル名は、リソース名として値をハッシュします。
LET configコン = {
useCdnDomainを：trueに、 // 、CDNの加速ドメイン名かどうかを示すブール値、真の表示は、デフォルトはfalseです。
リージョン：qiniu.region.z1 // アップロードドメイン領域（Z1北朝鮮、中国）、nullまたはundefined、自動分析装置のアップロードドメイン領域
};
putExtraましょう = {
fnameのを： ""、 // 元のファイル名のファイル
のparamsを：{} 、 カスタム配置変数：「X：名」：「セックス」
MIMEタイプ：ヌル // リミットアップロードファイルの種類、ファイルの種類を制限するものではありませヌルであることを示し、配列への制限タイプ：[「画像/ PNG」、 「画像/ JPEG ""画像/ GIF「]
};
// クラスのインスタンスサブスクライブ法で観察され
VAR観測可能= qiniu.upload（ファイル、キー、uptoken、putExtra、コンフィグ）;
VARのサブスクリプションobservable.subscribe =（{ / / アップロードが開始
次へ（結果）=> {
// 進捗情報を受信し、アップロードを、結果は、オブジェクトに合計フィールドである
// ロードされた：アップロードサイズ;サイズ：総アップロード情報、パーセント：現在のアップロードの進行状況
にconsole.log（結果）; //形式：{合計：{ロード：1671168、サイズ：2249260、パーセント：74.29856930723882}}
この .percent = result.total.percent.toFixed（0 ）;
}、
エラー：（errResult） => {
// 後にエラーをアップロード故障所与
にconsole.log（errResult）
}、
コンプリート（結果） => {
// の受信成功した後に返された情報
はconsole.log（結果）; // 形式：{ハッシュ： "Fp5_DtYW4gHiPEBiXIjVsZ1TtmPc"、キー「％TStC006TEyVY5lLIBt7Eg .JPG「}
この .qiniuKey = result.data.key;
この $ EMIT（ 'キー'、。この.qiniuKey）
}
}）
}）
}
}、
getQiniuTokenは（）{
返す 新しい約束を（（解決、拒否）=> {
VARの自己= この;
これ。$ HTTPGET（この $ HTTP、 "ユーザー/ dataController / getUploadToken"、。この。$ trimJson（self.queryInfo）、関数（RET）{
にconsole.log（ 'RET' 、ret.token）;
解決（ret.token）;
}）;
}）
}
}
}
</ SCRIPT>
<スタイルのlang = "SCSSは"スコープ> BTN {
.FT -plant-upload- ボタン{
垂直 - 整列：中央;
.progress {
幅：85px;
高さ：7px;
垂直 - 整列：中央;
表示： -webkit-inline- ボックス。
表示： -ms-inline- フレキシボックス。
表示：インライン - フレックス。
背景：銀;
-webkit-ボックスシャドウ：なし！重要;
ボックスません -shadow：どれも！重要;
マージン - 左：5pxの;
}
}
.upload -
国境：1pxの固体＃5084fe。
パディング：5pxの23px;
概要：なし。
国境左：5pxの; - 半径：4PX。
カーソル：ポインタ;
背景：#FFF;
色：＃ 333 ;
}
.progress - wraper {
表示：インライン - ブロック。
}
.progress {
幅：85px;
高さ：7px;
垂直 - 整列：中央;
表示：インライン - フレックス。
背景：RGBA（ 192,192,192,1 ）。
ボックスません -shadow：どれも！重要;
マージン -
.progress - バー{
表示：インライン - ブロック。
背景：RGBA（ 80,132,254,1 ）。
}
}
.precent {
表示：インライン - ブロック。
垂直 - 整列：中央;
マージン - 左：3px;
}
.FILE - 名前{
表示：インライン - ブロック。
垂直 - 整列：中央;
マージン - 左：3px;
}
.add - 教材{
パディング - 左：15ピクセル。
}
</スタイル>
2、7頭の牛の導入は、親アセンブリのコンポーネントをアップロード
<DIV CLASS = "フォームグループ行">
<ラベル用课件上传</ラベル> = "qiniu"クラス= "COL-MD-3 COL-形ラベル">
qiniuUploadDesc =」<QiniuUploadファイルタイプ= "教材" '上传课件'」：classroomUpload = "queryInfo.classroomno"：boxClass = " 'を追加-コースウェア'"：showProgress = "true"を@キー= "SETKEY">
<テンプレートスロット= "uploadTitle">
</テンプレート>
</ QiniuUpload>
</ div>
<スクリプト>
からの輸入ブレッドクラム '../chart/Breadcrumb' ;
以下からの輸入Selectセレクト」../chart/Select2' ;
以下からの輸入列挙」../chart/Enums' ;
以下からの輸入アップロード「../chart/Upload」。
からの輸入AddEditMain」../chart/AddEditMain' ;
以下からの輸入QiniuUpload '../chart/QiniuUpload' ;
エクスポートデフォルト{
名： 'AddClassroomCourseware' 、
コンポーネント：{
'ブレッドクラム' ：ブレッドクラム、
'Selectセレクト' ：・セレクト、
'列挙' ：列挙型、
'アップロード' ：アップロード、
'AddEditMain' ：AddEditMain、
'QiniuUpload' ：QiniuUpload
}
/ / 代码略
</ SCRIPT>
プロパティの小道具は、サブアセンブリを転送するために使用されます。このスプライシングより複雑なファイル名（キー：ファイルのリソース名）。