Vue3稳定版（Vite）图片上传异常：仅返回文件名且传空对象

问题描述 #

基于Vite的Vue3项目从beta版升级到稳定版后，图片上传功能出现异常：原本正常的上传现在仅返回文件名，无法正确识别为图片/文件。虽然payload中的logo被识别为File实例，但显示为空对象，无法获取有效的二进制数据。

相关代码 #

上传组件代码 #

<template>
  <div class="field">
    <div class="file is-boxed  has-name" :class="{'is-success': value, 'is-danger': !!errorMessage}">
      <label class="file-label">
        <input
          class="file-input"
          type="file"
          :name="name"
          @blur="handleBlur"
          @reset="handleReset"
          @input="onFieldChange"
          autocomplete="off"
        >

        <div class="file-cta">
          <span class="file-icon"> <i class="fas fa-upload"></i> </span>
          <span class="file-label">{{fileLabel}}</span>
        </div>

        <span class="file-name"> {{value ?? 'Please select a file!' }} </span>
      </label>
    </div>

    <ErrorMessage :name="name" class="help is-danger is-black" as="div" />

  </div>
</template>

<script lang="ts">
import {ref} from "vue";
import {useField,  ErrorMessage} from "vee-validate";

export default {
  components: {
    ErrorMessage
  },
  name: "BaseFileField",
  emits: ['onChange', 'update:modelValue'],
  props: {
    name: {
      type: String,
      required: true
    },
    fileLabel: {
      type: [String],
      required: true
    },
    modelValue: {
      required: true
    }
  },
  setup(props: any, {emit}: any) {
    const {
      handleBlur, handleReset, handleChange, value, meta, errorMessage, errors
    } = useField(props.name, undefined, {
      initialValue : props.modelValue,
    });

    return  {
      errorMessage, handleReset,  handleBlur, value,  meta,  errors,
      onFieldChange: (e: any ) => {
        const selectedFile = e.target.files[0].name;
        handleChange(selectedFile);
        emit("update:modelValue", e.target.files[0]);
        emit('onChange', e);
      },
    }
  }
}
</script>

组件使用方式 #

<BaseS3UploadField name="partnerLogo[en]" file-label="Upload a logo" v-model="selectedTranslations.en.logo"/>

服务器上传校验代码 #

if (payload.logo instanceof File) {
      fd.append('logo', payload.logo)
}

原因分析 #

1. 字段状态不一致：在onFieldChange函数中，给vee-validate的handleChange传递的是文件名（字符串），但给update:modelValue传递的是完整的File对象。这导致vee-validate维护的表单字段值与v-model绑定的变量状态完全不一致。
2. 响应式代理的视觉误导：Vue3的响应式系统会用Proxy包装对象，File对象被代理后，控制台打印时可能会显示为空对象，但实际上它的属性和方法仍然存在。不过核心问题还是字段值的不一致导致后续上传逻辑无法正确识别文件数据。

解决方案 #

1. 同步字段值与v-model状态 #

修改onFieldChange函数，给handleChange传递完整的File对象，确保vee-validate字段值与v-model绑定的变量保持一致：

onFieldChange: (e: any ) => {
  const selectedFile = e.target.files[0];
  handleChange(selectedFile); // 传递完整File对象而非文件名
  emit("update:modelValue", selectedFile);
  emit('onChange', e);
},

2. 调整模板文件名显示逻辑 #

由于现在value是File对象，模板中需要显示对象的name属性：

<span class="file-name"> {{value?.name ?? 'Please select a file!' }} </span>

3. 验证上传逻辑 #

修改完成后，payload中的logo会是完整的File实例，虽然控制台打印可能仍显示为Proxy包装的对象，但instanceof File会返回true，fd.append('logo', payload.logo)能正确读取并上传文件的二进制数据。

内容的提问来源于stack exchange，提问作者Rade Ilijev