Vue3如何从FormFile组件获取InputFile组件的文件输入值？

核心问题分析 #

你当前的错误在于直接通过组件构造函数访问内部ref（InputFile.fileName），这不符合Vue3组件通信规则；同时上传文件不能用普通JSON格式提交，必须使用FormData。以下是修正后的实现方案：

1. 修改InputFile组件：监听文件选择并向父组件传递数据 #

<template>
  <input
    :id="props.name"
    :name="props.name"
    type="file"
    :ref="props.name"
    @change="handleFileChange"
  />
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  name: String,
});
// 定义用于传递文件的自定义事件
const emit = defineEmits(['file-selected']);

const handleFileChange = (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    // 向父组件传递选中的文件对象
    emit('file-selected', selectedFile);
  }
};
</script>

2. 修改FormFile组件：接收文件并发起正确的POST请求 #

<template>
  <div>
    <InputFile name="file" @file-selected="handleFileReceived" />
    <button @click="submitFile">上传文件</button>
  </div>
</template>

<script setup>
import InputFile from "@/components/InputFile";
import axios from "axios";
import { ref } from "vue";

// 存储子组件传递过来的文件
const selectedFile = ref(null);

// 接收子组件传递的文件
const handleFileReceived = (file) => {
  selectedFile.value = file;
};

// 发起上传请求
const submitFile = () => {
  if (!selectedFile.value) return;

  // 用FormData包装文件，这是上传文件的标准格式
  const formData = new FormData();
  formData.append('file', selectedFile.value);

  axios.post('post/file', formData, {
    // 必须设置该请求头，后端才能正确解析FormData
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((res) => console.log(res))
    .catch(err => console.error('上传失败:', err));
};
</script>

关键注意事项 #

• 组件内部状态（如选中的文件）不能直接通过组件构造函数访问，必须通过自定义事件或v-model绑定实现父子组件通信
• 上传文件必须使用FormData格式，不能将文件对象直接放入JSON请求体中，同时要设置对应的请求头
• 可以根据需求扩展：比如在InputFile中显示文件名、支持多文件上传等，只需修改handleFileChange逻辑和事件传递的数据即可

内容的提问来源于stack exchange，提问作者Vic Wild