Nuxt3+TypeScript文件上传时Proxy对象引发file.size读取及类型问题

问题根源 #

Vuetify的v-file-input组件在Nuxt3（Vue3）环境下，@change事件返回的是被Vue响应式系统包装的Ref<File | null>对象（表现为Proxy），而非原始的File实例，所以直接按File类型声明参数会出现类型不匹配，且直接访问file.size会返回undefined。

解决方案 #

方案1：模板中直接传递解包后的文件对象

修改模板，在触发change事件时直接传入$event.value，这样回调函数就能拿到原始的File或null：

<v-file-input @change="handleChange($event.value)" />

对应的脚本代码，同步调整参数类型：

const handleChange = (file: File | null) => {
  checkFileSize(file);
};

// 兼容null的参数类型，避免空值报错
const checkFileSize = (file: File | null): boolean => {
  if (!file) {
    return true;
  }
  return props.maxSize * 1024 * 1024 >= file.size;
};

方案2：脚本中手动解包Ref对象

如果不想修改模板，可以使用Vue的unref工具函数解包，同时兼容多种输入类型：

import { unref } from 'vue';

const handleChange = (file: Ref<File | null> | File | null) => {
  const rawFile = unref(file);
  checkFileSize(rawFile);
};

const checkFileSize = (file: File | null): boolean => {
  if (!file) {
    return true;
  }
  return props.maxSize * 1024 * 1024 >= file.size;
};

方案3：明确声明参数为Ref类型

直接将回调参数类型声明为Ref<File | null>，通过.value访问原始文件：

import type { Ref } from 'vue';

const handleChange = (file: Ref<File | null>) => {
  checkFileSize(file.value);
};

const checkFileSize = (file: File | null): boolean => {
  if (!file) {
    return true;
  }
  return props.maxSize * 1024 * 1024 >= file.size;
};

总结 #

优先选择方案1，它最直接地规避了响应式包装带来的类型问题，代码简洁易维护。如果因场景限制无法修改模板，再考虑方案2或3。

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