Vue3+shadcn-vue多图上传遇InvalidStateError等错误求修复

错误原因拆解 #

• 第一个警告：shadcn-vue的Input组件默认modelValue类型为字符串/数字，但多选文件场景下我们需要的是数组/FileList，直接绑定就会触发类型校验失败。
• 第二个全局错误：浏览器安全机制限制，<input type="file">的value仅能被设置为空字符串，表单库若尝试给它赋值数组或其他内容就会报错。

具体解决步骤 #

1. 放弃直接用v-model绑定file input
   不让表单库自动管理file input的modelValue，改为手动监听change事件收集文件：

   <Field name="photos">
     <template #componentField="{ field }">
       <FormItem>
         <FormLabel>上传图片</FormLabel>
         <Input
           type="file"
           accept="image/*"
           multiple
           @change="handleFileChange(field)"
           :value="''" <!-- 强制设为空字符串，规避赋值错误 -->
         />
         <FormDescription>可选择多张图片</FormDescription>
         <FormMessage />
       </FormItem>
     </template>
   </Field>
   

2. 实现文件收集逻辑
   在组件的setup或methods中编写handleFileChange，将选中的文件转为数组后更新表单字段：

   const handleFileChange = (field) => {
     const files = Array.from(event.target.files)
     field.setValue(files) // 用表单字段的setValue方法更新值，确保类型匹配
   }
   

3. 初始化表单时给photos设数组默认值
   确保表单初始值里photos是数组类型，避免出现undefined：

   const form = useForm({
     initialValues: {
       // 其他表单字段...
       photos: []
     }
   })
   

4. 正确使用componentField插槽
   componentField插槽会传递field对象，包含setValue、value等方法和属性。我们不需要直接绑定v-model，而是通过@change手动调用field.setValue更新表单值，同时给input设置:value="''"绕过浏览器安全限制。

关于photos变成undefined的问题 #

如果不绑定componentField，表单字段的上下文无法传递到Input组件，导致无法正确关联表单的photos字段，所以会出现undefined。通过componentField插槽拿到field对象，就能正确关联表单字段，再手动更新值就不会有这个问题了。

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