Hướng Dẫn Cài Đặt và Sử Dụng Vue2Dropzone trong Dự Án nuxt js

Bước 1: Tạo Dự Án Nuxt.js Mới

Nếu bạn chưa có dự án Nuxt.js, bạn có thể tạo một dự án mới :

Chú ý: Có 2 cách để tạo dự án Nuxtjs đó là:

• npm
• yarn

Đối với yarn chạy lệnh sau :

yarn create nuxt-app <project-name>

Còn đối với npm thì  tạo dự án bằng cách sử dụng npx:

npx create-nuxt-app servbay-nuxt-app

2. Cài Đặt Vue2Dropzone

2.1 Cài Đặt Qua npm

Trước tiên, bạn cần cài đặt Vue2Dropzone vào dự án của bạn. Mở terminal trong thư mục dự án và chạy lệnh sau:

npm install vue2-dropzone --save

yarn add vue2-dropzone --save

2.2 Cài Đặt Dropzone.js

Vue2Dropzone phụ thuộc vào Dropzone.js, vì vậy bạn cần cài đặt thư viện này:

npm install dropzone --save

yarn add dropzone --save

Sau khi cài đặt thành công, bạn sẽ cần import và cấu hình cả Vue2Dropzone và Dropzone.js trong dự án của mình.

Bước 3: Tạo plugin cho Vue2Dropzone

Để sử dụng cho Vue2Dropzone trong dự án Nuxt.js, bạn có thể tạo một plugin. Tạo một tệp mới trong thư mục plugins, ví dụ vue2-dropzone.js:

import Vue from 'vue';
import Vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';

Vue.component('Vue2Dropzone', Vue2Dropzone);

Bước 4: Đăng ký plugin trong nuxt.config.js

Mở tệp nuxt.config.js và thêm plugin mà bạn vừa tạo vào phần plugins:

export default {
  // ...
  plugins: [
       { src: '~/plugins/vue2-dropzone.js', ssr: false } // ssr: false nếu bạn chỉ muốn dùng trên client
  ],
  // ...
}

Bước 5: Tạo component cho vue2-dropzone

Chúng ta sẽ tạo component cho vue2-dropzone bằng cách tạo file Vue2dropzone.vue: 

<template>
  <div>
    <!-- Khu vực Vue2Dropzone -->
    <vue2-dropzone
      :options="dropzoneOptions"
      @vdropzone-success="onSuccess"
      @vdropzone-error="onError"
    />
  </div>
</template>

<script>
// Import Vue2Dropzone và Dropzone.css
import Vue2Dropzone from 'vue2-dropzone';
import 'dropzone/dist/dropzone.css';

export default {
  name: 'VueDropzoneComponent',

  components: {
    Vue2Dropzone
  },

  data() {
    return {
      // Cấu hình cho Dropzone
      dropzoneOptions: {
        url: '/upload',           // URL gửi tệp
        maxFiles: 5,              // Giới hạn số lượng tệp tối đa
        maxFilesize: 2,           // Kích thước tệp tối đa (MB)
        acceptedFiles: 'image/*', // Loại tệp được chấp nhận (ví dụ: chỉ hình ảnh)
        addRemoveLinks: true,     // Thêm liên kết xóa tệp
        dictDefaultMessage: 'Kéo và thả các tệp vào đây', // Thông báo mặc định
      }
    };
  },

  methods: {
    // Xử lý khi tải lên thành công
    onSuccess(file, response) {
      console.log('Tệp đã tải lên thành công:', file, response);
      this.$emit('file-upload-success', { file, response });
    },

    // Xử lý khi có lỗi trong quá trình tải lên
    onError(file, response) {
      console.error('Lỗi khi tải lên tệp:', file, response);
      this.$emit('file-upload-error', { file, response });
    }
  }
};
</script>

<style scoped>
/* Tùy chỉnh giao diện của Dropzone nếu cần */
</style>

Bước 6: Gọi ra và sử dụng

Giả sử bạn có một component cha gọi là App.vue. Bạn có thể gọi component Vue2dropzone như sau:

<template>
  <div id="app">
    <h1>Tải lên tệp</h1>

    <!-- Sử dụng VueDropzoneComponent -->
    <VueDropzoneComponent 
      @file-upload-success="handleSuccess"
      @file-upload-error="handleError"
    />
  </div>
</template>

<script>
// Import VueDropzoneComponent
import VueDropzoneComponent from './components/VueDropzoneComponent.vue';

export default {
  name: 'App',
  components: {
    VueDropzoneComponent
  },

  methods: {
    // Xử lý khi tải lên thành công
    handleSuccess(data) {
      console.log('Tải lên thành công!', data);
      // Xử lý dữ liệu trả về từ server nếu cần
    },

    // Xử lý khi có lỗi xảy ra
    handleError(error) {
      console.error('Có lỗi xảy ra:', error);
      // Thực hiện xử lý lỗi hoặc hiển thị thông báo
    }
  }
};
</script>

<style>
/* Các kiểu tùy chỉnh cho App.vue nếu cần */
</style>

Bước 7: Chạy project của bạn

Cuối cùng, bạn có thể chạy project Nuxt.js của mình bằng lệnh:

npm run dev

hoặc

yarn dev

Kết luận

Bằng cách tách phần Vue2Dropzone thành một component riêng biệt như vậy, bạn có thể tái sử dụng nó nhiều lần trong ứng dụng của mình và dễ dàng tùy chỉnh cũng như quản lý các sự kiện liên quan đến quá trình tải lên tệp. Các thành phần như url, maxFilesize, và các sự kiện như @vdropzone-success sẽ giúp bạn linh hoạt trong việc quản lý tải lên tệp cho dự án của mình.

Chúc bạn thành công trong việc sử dụng Vue2Dropzone! Nếu bạn gặp phải vấn đề nào, đừng ngần ngại hỏi thêm!