Hướng dẫn cài và sử dụng vue-object-to-formdata cho dự án nuxtjs

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="form.name" placeholder="Name" />
      <input type="email" v-model="form.email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import objectToFormData from 'vue-object-to-formdata';

export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // Chuyển đổi object thành FormData
      const formData = objectToFormData(this.form);

      // Giả sử bạn muốn gửi formData qua API
      this.$axios.post('/your-api-endpoint', formData)
        .then(response => {
          console.log('Form submitted successfully:', response);
        })
        .catch(error => {
          console.error('Error submitting form:', error);
        });
    }
  }
};
</script>

Ở ví dụ trên, khi bạn gửi form, objectToFormData sẽ chuyển đối tượng this.form thành đối tượng FormData để có thể gửi qua HTTP POST, giúp bạn dễ dàng upload file hoặc dữ liệu phức tạp từ form.

2. Sử dụng trong các plugin hoặc middleware (tuỳ chọn)

Nếu bạn muốn sử dụng vue-object-to-formdata ở nhiều nơi trong ứng dụng và không muốn phải import nó trong từng component, bạn có thể tạo một plugin Nuxt.js.

• Tạo file plugin plugins/vue-object-to-formdata.js.

import objectToFormData from 'vue-object-to-formdata';

export default (context, inject) => {
  // Inject `objectToFormData` vào tất cả các component
  inject('objectToFormData', objectToFormData);
};

• Cập nhật nuxt.config.js để sử dụng plugin này:

export default {
  plugins: [
    '~/plugins/vue-object-to-formdata.js',
  ]
};

Sau khi làm xong các bước trên, bạn có thể sử dụng this.$objectToFormData trong bất kỳ component nào mà không cần phải import thêm nữa.

Bước 4: Gửi FormData qua Axios hoặc Fetch API

Khi bạn đã chuyển đối tượng JavaScript thành FormData, bạn có thể sử dụng axios hoặc fetch để gửi dữ liệu lên server.

Ví dụ với axios:

this.$axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('Data uploaded:', response);
}).catch(error => {
  console.error('Upload failed:', error);
});

Bước 5: Xử lý trả về từ server

Nếu server trả về dữ liệu sau khi nhận form, bạn có thể xử lý như bình thường.

this.$axios.post('/your-api-endpoint', formData)
  .then(response => {
    console.log('Response from server:', response.data);
  })
  .catch(error => {
    console.error('API error:', error);
  });

Tóm tắt

• Cài đặt vue-object-to-formdata bằng npm install vue-object-to-formdata.
• Sử dụng objectToFormData để chuyển object thành FormData trong các component.
• Có thể tích hợp trong Nuxt.js qua plugin nếu muốn sử dụng ở nhiều nơi trong ứng dụng.
• Gửi dữ liệu FormData qua HTTP request (Axios, Fetch) đến server.

Hy vọng hướng dẫn trên sẽ giúp bạn tích hợp thành công vue-object-to-formdata vào dự án Nuxt.js của mình!