ホームページ > 記事 > ウェブフロントエンド > Vueでプログレスバーを使用したファイルのドラッグとアップロード機能を実装する方法
Vueでプログレスバーを使用したファイルのドラッグとアップロード機能を実装する方法
- 亚连オリジナル
- 2018-06-05 11:52:082370ブラウズ
この記事では主に、プログレスバーを備えたファイルのドラッグとアップロード機能の Vue 実装をサンプルコードを通じて詳しく紹介しており、必要な方は参考にしてください
1。基本インターフェイス
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
</style>
<title>Document</title>
</head>
<body>
<p id="app" class="m-5">
<p class="dropbox p-3">
<h2 class="text-center">把要上传的文件拖动到这里</h2>
</p>
</p>
<script>
new Vue({
el: '#app',
data: {},
methods: {},
mounted: function () {}
});
</script>
</body>
</html>
2. ドラッグイベントを検出します
まず、ページでファイルのドラッグをサポートさせ、Vueのmounted()関数にコードを追加します:
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}ファイルをブラウザにドラッグするときエリアをドラッグすると、次の 3 つのイベントがトリガーされます:
ファイルが初めてドラッグ エリアに入ったとき、dragenter イベントがトリガーされます
ファイルがドラッグ エリア内で前後にドラッグされると、ドラッグオーバーイベントが継続的にトリガーされます
ファイルはすでにドラッグエリアにあり、マウスが放されるとドロップイベントがトリガーされます
ドラッグとアップロードを実装するには、ドロップイベントに注意するだけで済みます。ただし、ブラウザのデフォルト動作を防ぐために、他の 2 つのイベントも監視する必要があります。ブロックされていない場合、ファイルをブラウザにドラッグすると、ブラウザは自動的にファイルをダウンロードし (デフォルトの動作)、ドロップ イベントはトリガーされません。
イベント リスニング関数が Vue のメソッド オブジェクトに追加されます:
methods: {
uploadFile: function (file) {
console.log(file);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},onDrop() 関数、e.dataTransfer.files を通じて、ユーザーがブラウザにドラッグしたファイルの基本情報を取得できます、uploadFile() 関数この情報のみが出力され、ブラウザにドラッグされた各ファイルが File オブジェクトであることがわかります。
3. ドラッグ イベントを処理します
次に、uploadFile() を行う必要があります。ファイルをドラッグすると、ドラッグエリアにファイル名とアップロードの進行状況バーが表示されるようにする機能が追加されました。
まず、ブラウザにドラッグされたすべてのファイルの名前を保存するために、Vue のデータ オブジェクトで files 属性を定義します。その後、uploadFile() 関数が呼び出されるたびに、ファイル名を保存し、ファイルへのアップロードの進行状況を保存します。
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
},
}アップロードの進行状況関数については後で紹介します。最初に固定値を書き込みます。
同様に、HTML コードでは、v-for キーワードを使用してファイルの各項目を表示します:
<p class="dropbox p-3">
<h2 class="text-center">把要上传的文件拖动到这里</h2>
<p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<p class="progress">
<p class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></p>
</p>
</p>
</p>さらに、「アップロードするファイルをここにドラッグしてください」というプロンプトは、ドラッグ領域にファイルがない場合にのみ表示されます。ショー:
61acfbb27c594130a9ef070c60b2bec1 アップロードするファイルをここにドラッグします2e9b454fa8428549ca2e64dfac4625cd
このようにすると、ドラッグ効果は次のようになります:
4. ファイルのアップロード
次に、実際のアップロードを実現します。ファイルをアップロードするには、引き続き、uploadFile() 関数にコードを追加します。ここでは
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.send(fd);
},FormData が使用され、アップロードされるファイルは FormData に添付され、AJAX を通じて PHP 側に送信されます。 PHP 側のコード:
if (isset($_FILES['myFile'])) {
move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
echo 'OK';
} else {
echo 'No file specified';
}次に、ページを更新し、コンピューター上の 2 つのファイルをブラウザーにドラッグします。PHP 側はファイルを受信して、アップロード ディレクトリに保存します:
ヒント: ドラッグ中に PHP が発生した場合は、指定されたファイルが返されない場合、または $_FILES が NULL である場合、PHP が POST リクエストの最大バイト数を制限しているか、アップロードされたファイルのサイズを制限している可能性があります。この時点で、php.ini で次の 2 つの設定を調整する必要があります:
post_max_size = 20M // POST请求的最大字节数 upload_max_filesize = 20M // 上传文件的最大体积
プログレスバーの表示
基本的なアップロード機能は完了し、最後にプログレスバーを完成させます。 AJAX リクエストが一定期間データを送信するたびに、進行状況イベントが生成され、現在のアップロードの進行状況を知ることができます。
uploadFile: function (file) {
...
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},e.loaded は、AJAX によって現在送信されているバイト数を表します。 e.total は、AJAX の合計送信バイト数を表します。これら 2 つのプロパティを使用して、アップロードの進行状況のパーセンテージを計算できます。
このようにして、プログレスバー付きのファイルのドラッグ＆アップロード機能が完成します。
添付ファイル: 完全なコード
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<style>
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
</style>
<title>Document</title>
</head>
<body>
<p id="app" class="m-5">
<p class="dropbox p-3">
<h2 v-if="files.length===0" class="text-center">把要上传的文件拖动到这里</h2>
<p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
<h5 class="mt-0">{{ file.name }}</h5>
<p class="progress">
<p class="progress-bar progress-bar-striped"
:style="{ width: file.uploadPercentage+'%' }"></p>
</p>
</p>
</p>
</p>
<script>
new Vue({
el: '#app',
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 0
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}
});
</script>
</body>
</html>上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。
関連記事:
要素uiのダイアログボックスel-dialogクローズイベントについて(詳細チュートリアル)
以上がVueでプログレスバーを使用したファイルのドラッグとアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。