vue-dropzoneでファイルアップロードを追加する方法

投稿日: 2022-04-20 2022-10-22
タグ: Vue.js

警告：公開以来、このコンポーネントには次の通知があります。「このコンポーネントは当初の期待をはるかに超えており、ユーザーが必要とする量のサポートを提供できません。」

序章

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 あなた自身。

この記事の動作するデモとコードは、このコードサンドボックスにあります。

getdocs

13036