vue.js 图片上传组件

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <img :src="previewImage" alt="Preview" v-if="previewImage">
    <button @click="uploadImage">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      previewImage: null,
      file: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.file = file;
        const reader = new FileReader();
        reader.onload = (e) => {
          this.previewImage = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    uploadImage() {
      if (!this.file) return;
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log('Upload successful:', response.data);
      })
      .catch(error => {
        console.error('Upload failed:', error.response ? error.response.data : error.message);
      });
    }
  }
};
</script>