vue.js 上传图片组件

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadImage">上传图片</button>
    <img v-if="imageUrl" :src="imageUrl" alt="预览" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      imageUrl: ''
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      if (this.selectedFile) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result;
        };
        reader.readAsDataURL(this.selectedFile);
      }
    },
    async uploadImage() {
      if (!this.selectedFile) {
        alert('请选择一个文件');
        return;
      }

      const formData = new FormData();
      formData.append('image', this.selectedFile);

      try {
        // 假设这里有一个名为 uploadImage 的 API 函数
        const response = await uploadImage(formData);
        console.log('上传成功', response);
      } catch (error) {
        console.error('上传失败', error);
      }
    }
  }
};
</script>