<テンプレート>
の<div @クリック= "GET">
<DIV CLASS = "VUE-アップローダー">
<DIV CLASS = "ファイルリスト">
<セクションV- のため = "ファイルの（ファイル、インデックス）"クラス=」ファイル項目ドラッグ項目」：キー= "インデックス">
<IMG：SRC = "file.srcは" ALT = "" ondragstart = "falseを返します;">
<Pクラス= "ファイル名"> {{ファイル。名}} </ P>
<スパンクラス= "ファイル削除"をクリックし@ = "（インデックス）を削除"> + </ span>を
</ section>の
<セクションV- の場合 = "状態=== '準備'"クラス=「ファイル・アイテム」>
<DIV @クラスは= "追加" = "追加"をクリック>
の<span> + </ span>を
</ div>
</ section>の
</ div>
<セクションV-もし = "！files.length == 0"クラス= "アップロード-FUNCを">
<divのクラスには、= "プログレスバー">
<セクションV- の場合 = "アップロード"：幅= "（パーセント* 100）+「％ 「 "> {{（パーセント* 100）+ '％'}} </セクション>
</ div>
<DIV CLASS ="オペレーションボックス">
<ボタンV- もし「 '="ステータス==='準備@クリック= "提出">上传</ button>の
<ボタンV- 場合 = "状態=== '終了'" @クリック= "終了">完成</ボタン>
</ div>
</ section>の
の<input type = 「ファイル」は「=を受け入れます画像/ *」@変更= "fileChanged" REF = "ファイル"複数= "複数">
</ div>
</ div>
</テンプレート>
の<script>
のエクスポートデフォルト{
名： 'Upfile' 、
データ（）{
リターン{
状態： '準備' 、
ファイル：[]、
ポイント：{}、
アップロード：偽、
パーセント： 0
}
}、
メソッド：{
取得（）{
この.GetNumber （）
}、
追加（）{
この。$ refs.file.click（）
}、
提出（）{
場合（この .files.length === 0 ）{
console.warn（ 'いいえファイル！' ）
のリターン
}
CONST FORMDATA = 新しいいるFormData（）
この .files.forEach（（アイテム）=> {
formData.append（item.name、item.file）
}）
CONST XHR = 新規のXMLHttpRequest（）
xhr.upload.addEventListener（ '進歩' 、この .uploadProgress、偽）
xhr.open（ 'POST'、 '/ API /アップロード'、この .SRC、真）
この .uploading = 真
xhr.send（FORMDATA）
xhr.onload =（）=> {
この.uploading = falseの
場合（xhr.status === 200 || xhr.status === 304 ）{
この .statusは= '終了'
はconsole.log（ '成功をアップロード！' ）
} 他{
はconsole.log（ `エラー：エラーコード$ {xhr.status} `）
}
}
}、
{）（完成
これは .files = []
この .status = '準備'
}、
{（）のインデックスを削除し
、この（インデックス.files.spliceを、1 ）
} 、
fileChanged（）{
CONSTリスト = この。$ refs.file.files
用（聞かせてI = 0; iのlist.length <;私は++ ）{
場合（！この{.isContain（リスト[i]）と）
constの項目 = {
名：リスト[i]が.nameの、
サイズ：リスト[I] .size、
ファイル：リスト[I]
}
この.html5Reader（リスト[i]は、項目）
この.files.push（アイテム）
}
}
この。$ refs.file.value = ''
}、
// 将图片文件转成BASE64格式
html5Reader（ファイル、項目）{
CONSTリーダー = 新しい FileReaderの（）
reader.onload=（E）=> {
この。$セット（項目、 'SRC' 、e.target.result）
}
reader.readAsDataURL（ファイル）
}、
isContain（ファイル）{
この .files.forEach（（アイテム）=> {
もし（item.name === file.name && item.size === file.size）{
戻り 真
}
}）
を返す 偽
}
// 上传进度
uploadprogressの（EVT）{
CONST成分 = この
場合（evt.lengthComputable ）{
CONSTはpercentComplete =恐らくMath.round（（* 100 evt.loaded）/ evt.total）
component.percent =はpercentComplete / 100
} 他{
console.warn（ 'を計算することができない進行をアップロード' ）
}
}
}
}
</ SCRIPT>
<スタイルスコープ>
.vue - アップローダー{
国境：1pxの固体＃e5e5e5。
}
.vue -uploader .file- リスト{
パディング：10pxの0PX。
}
.vue -uploader .file- リスト：{後に
コンテンツ： '' 。
表示ブロック;
クリア：両方;
可視性：隠されました;
ライン -height：0;
高さ： 0 ;
フォント -size：0 ;
}
.vue -uploader .FILEリスト.file- 項目{
フロート：左;
位置：相対;
幅：100ピクセル;
テキスト - 揃える：センター;
}
.vue -uploader .FILEリスト.file- 項目IMG {
幅：80px;
高さ：80px;
国境：1pxの固体#ececec。
}
.vue -uploader .FILEリスト.FILE項目は.file- {削除
位置：絶対。
右：12ピクセル;
表示：なし;
トップ：4PX。
幅：14px;
高さ：14px;
色：白;
カーソル：ポインタ;
行 - 高さ：12ピクセル;
ボーダー -radius：100％;
変換：回転（45deg）。
背景：RGBA（ 0、0、0、0.5 ）。
}
.vue -uploader .FILEリスト.FILE項目：ホバー.file- {削除
表示：インライン。
}
.vue .file- -uploader .FILEリスト.FILE項目名{
マージン： 0 。
高さ：40ピクセル;
単語 - ブレーク：ブレーク - すべて。
フォント- サイズ：14px;
オーバーフロー：隠されました;
テキスト - オーバーフロー：省略記号。
表示： -webkit- ボックス。
-webkitラインクランプ：2 。
-webkit-ボックス- オリエント：縦;
}
.vue - アップローダ.add {
幅：80px;
高さ：80px;
マージン - 左：10pxの;
フロート：左;
テキスト - 揃える：センター;
行 - 高さ：80px;
国境：1pxの破線#ececec。
フォント - サイズ：30px;
カーソル：ポインタ;
}
.vue -uploader .upload-FUNC {
ディスプレイ：フレックス。
パディング：10pxの;
マージン：0PX。
背景：＃f8f8f8;
国境 - トップ：1pxの固体#ececec。
}
.vue -uploader .upload-FUNC .progress- バー{
フレックス -grow：1 。
}
.vue -uploader .upload-FUNC .progress- バーセクション{
マージン - トップ：5pxの。
背景：＃00b4aa。
国境 - 半径：3px;
テキスト - 揃える：センター;
色：#FFF;
フォント -
}サイズ：12ピクセル;
トランジション：すべて.5s容易。
.vue -uploader .upload-FUNC .operation- ボックス{
フレックス -grow：0 。
パディング - 左：10pxの;
}
.vue -uploader .upload-FUNC .operation- ボックスボタン{
パディング：12ピクセル4PX。
色：#FFF;
背景：＃007ACC。
国境：なし;
国境 - 半径：2ピクセル。
カーソル：ポインタ;
}
.vue -uploader>入力[タイプ= "ファイル" ] {
表示：なし。
}
</スタイル>