How can I handle file uploads in Vue.js?

How can I handle file uploads in Vue.js?

You can handle file uploads in Vue.js using the <input type='file'> element and the FormData API.

Can you show me a code example?

Sure! Here's a simple example:

<template>
  <input type='file' @change='onFileChange' />
</template>

<script>
export default {
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
      // Now you can send formData to your server
    }
  }
}
</script>

What about handling multiple file uploads?

For multiple file uploads, you can use the multiple attribute in the input element and loop through the files:

<template>
  <input type='file' multiple @change='onFileChange' />
</template>

<script>
export default {
  methods: {
    onFileChange(event) {
      const files = event.target.files;
      const formData = new FormData();
      for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
      }
      // Send formData to your server
    }
  }
}
</script>