How can I implement file upload in Vue using Axios?

How can I implement file upload in Vue using Axios?

You can use the Axios library to handle file uploads in Vue. First, install Axios using npm or yarn.

What code do I need to write for the file upload?

You need to create a form with an input of type 'file' and use Axios to send a POST request with the file data.

Can you show me a sample code snippet?

Sure! Here's a simple example:

<template>
  <input type="file" @change="onFileChange" />
  <button @click="uploadFile">Upload</button>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return { file: null };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);
      axios.post('/upload', formData)
        .then(response => {
          console.log('File uploaded successfully:', response.data);
        })
        .catch(error => {
          console.error('Error uploading file:', error);
        });
    }
  }
};

This code handles file selection and uploads it to the '/upload' endpoint.

What backend setup do I need for this to work?

You need a server that can handle file uploads, such as Node.js with Express. Make sure to set up the appropriate endpoint to receive the file.