vue-dropzoneでファイルアップロードを追加する方法
警告:公開以来、このコンポーネントには次の通知があります。「このコンポーネントは当初の期待をはるかに超えており、ユーザーが必要とする量のサポートを提供できません。」
序章
vue-dropzone は、 Dropzone.js の上に実装されたVueコンポーネントであり、画像プレビューを使用したファイルアップロードのドラッグアンドドロップ機能を提供します。
非常に強力で多くのオプションがありますが、ほとんど構成を行わなくても、すぐに使用できる多くの機能が提供されます。 複数のファイルのアップロードを実行したり、それらをキャンセルしたり、ファイルのサイズと形式を検証したり、進行状況バーを表示したりすることができます。
プロジェクトの設定
インストールから始めましょう vue-dropzone
:
- npm install vue2-dropzone
次に、私たちの main.js
CSSファイルをインポートする必要があるエントリポイントファイル:
import 'vue2-dropzone/dist/vue2Dropzone.css'
基本的な画像のアップロードの処理
基本的な画像のアップロードを作成するには、コンポーネントをインポートし、それを使用して id
と options
プロパティ:
<template>
<div id="app">
<vue-dropzone id="drop1" :options="dropOptions"></vue-dropzone>
</div>
</template>
<script>
import vueDropzone from "vue2-dropzone";
export default {
data: () => ({
dropOptions: {
url: "https://httpbin.org/post"
}
}),
components: {
vueDropzone
}
};
</script>
注: URL https://httpbin.org/post
は、HTTPPOST呼び出しに対して有効な応答を返すHTTPサービスからのエンドポイントです。
オプションの適用
必要なオプションは url
しかし、使用できるものは他にもたくさんあります。
たとえば、次のようにするとします。
- 最大4つのファイル
- 最大ファイルサイズ2MB
- 500バイト単位で送信
- 150pxのカスタムサムネイルサイズを設定します
- アップロードされたアイテムをキャンセル可能にして削除可能にします(デフォルトでは削除されません)
次のように、これらすべてのビジネスルールをコンポーネントに適用できます。
export default {
data: () => ({
dropOptions: {
url: "https://httpbin.org/post",
maxFilesize: 2, // MB
maxFiles: 4,
chunking: true,
chunkSize: 500, // bytes
thumbnailWidth: 150, // px
thumbnailHeight: 150,
addRemoveLinks: true
}
})
// ...
}
The addRemoveLinks
オプションは、ドロップゾーンの各プレビューへのキャンセルと削除のリンクを追加します。
dropzonedocsで完全なオプションを確認できます。
ドロップゾーンの制御
カスタム機能を実装する場合は、 vue-dropzone
いくつかのメソッドを公開します。 ref
に <vue-dropzone>
鬼ごっこ。
たとえば、アップロードされたすべてのファイルを削除するボタンを実装できます。
<template>
<div id="app">
<vue-dropzone ref="dropzone" id="drop1" :options="dropOptions"></vue-dropzone>
<button @click="removeAllFiles">Remove All Files</button>
</div>
</template>
<script>
import vueDropzone from "vue2-dropzone";
export default {
// ...
methods: {
removeAllFiles() {
this.$refs.dropzone.removeAllFiles();
}
}
};
</script>
イベントの処理
何かが起こったときにあらゆる種類のアクションを実行するために使用できる一連のイベントがあります。
たとえば、ファイルがいつアップロードされたかを確認するには、 vdropzone-complete
イベント:
<template>
<div id="app">
<vue-dropzone
ref="dropzone"
id="drop1"
:options="dropOptions"
@vdropzone-complete="afterComplete"
></vue-dropzone>
<button @click="removeAllFiles">Remove All Files</button>
</div>
</template>
<script>
import vueDropzone from "vue2-dropzone";
export default {
// ...
methods: {
afterComplete(file) {
console.log(file);
}
}
};
</script>
アップロードが失敗したときやアップロードがキャンセルされたときにメッセージを表示する場合でも、一般的な操作の多くでイベントを使用する必要はありません。 vue-dropzone
デフォルトではすべてをカスタマイズ可能な形式で提供するため、イベントを使用する前に、必要な機能がすでに存在するかどうかを確認してください。
スタイルのカスタマイズ
ドロップゾーンのスタイルをカスタマイズするには、最初に include-styling
プロパティに false
デフォルトのスタイルをオフにするには:
<vue-dropzone
id="drop1"
:include-styling="false"
></vue-dropzone>
次に、 previewTemplate
オプション、テンプレートとそのクラスによって定義された正しい構造を持つ文字列を渡します。 出発点として、公式の例からテンプレートの例をとることができます。
<vue-dropzone
id="drop1"
:options="dropOptions"
:include-styling="false"
></vue-dropzone>
<script>
const getTemplate = () => `
<div class="dz-preview dz-file-preview">
<div class="dz-image">
<div data-dz-thumbnail-bg></div>
</div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark"><i class="fa fa-check"></i></div>
<div class="dz-error-mark"><i class="fa fa-close"></i></div>
</div>
`;
export default {
data: () => ({
dropOptions: {
previewTemplate: getTemplate()
}
})
}
</script>
次に、さまざまなクラス名をターゲットにすることで、CSSを使用してスタイルを設定できます。
<style>
#drop1 {
height: 200px;
padding: 40px;
color: white;
background: black;
}
#drop1 .dz-preview {
width: 160px;
}
/* ... */
</style>
結論
この紹介があなたに遊びに行くための出発点を与えてくれることを願っています vue-dropzone
あなた自身。
この記事の動作するデモとコードは、このコードサンドボックスにあります。