vue3文件上传获取值undefined

Question

我正在尝试使用 vue 上传文件，但我遇到的问题是，选择照片后无法访问 this.imageFile.value。我从设置中返回的数据 undefined.

在正常情况下，imageFile.value 在设置中工作。

<template>
  <img v-show="imageUrl" :src="imageUrl" alt="">
  <input @change="handleImageSelected,getdata" ref="fileInput" type="file" accept="image/*">
</template>
<script>
import {UseImageUpload} from "./use/UseImageUpload";

export default {
  data() {
    return {
      Hello: null
    }
  },
  methods: {
    getdata() {
      this.Hello = this.imageFile.value
    }
  },
  setup() {
    let {imageFile, imageUrl, handleImageSelected} = UseImageUpload();

    return {
      imageFile,
      handleImageSelected,
      imageUrl,
    }
  }
}
</script>

UseImageUpload.js

import {ref, watch} from "vue";

export function UseImageUpload() {
//image
    let imageFile = ref("");
    let imageUrl = ref("");

    function handleImageSelected(event) {
        if (event.target.files.length === 0) {
            imageFile.value = "";
            imageUrl.value = "";
            return;
        }

        imageFile.value = event.target.files[0];
    }

    watch(imageFile, (imageFile) => {
        if (!(imageFile instanceof File)) {
            return;
        }

        let fileReader = new FileReader();

        fileReader.readAsDataURL(imageFile);

        fileReader.addEventListener("load", () => {
            imageUrl.value = fileReader.result;
        });
    });

    return {
        imageFile,
        imageUrl,
        handleImageSelected,
    };
}

Answer 1

首先，请尽量不要混合选项和组合 API - 我知道这可能有效，但没有必要，在大多数情况下只是 anti-pattern.
Composition API 用于替换 Options API 或者更确切地说是提供替代方案。它们只是不应该一起工作或一起使用。

所以这会改进您的代码：

setup() {
    const Hello = ref(null);
    const {imageFile, imageUrl, handleImageSelected} = UseImageUpload();

    function getdata() {
      Hello = imageFile.value
    }

    return {
      imageFile,
      handleImageSelected,
      imageUrl,
      getdata,
}

这也应该可以解决您的问题。

vue3文件上传获取值undefined

vue3 file upload get value undefined

vuejs3