上传组件单独使用

src/components/form/ElFileUpload.vue

@@ -8,8 +8,8 @@ import type { UploadProps, UploadFile } from 'element-plus'
 import type { BasicFormItem } from '@/types/form'
 
 interface Props {
-  item: BasicFormItem
   modelValue: any
+  item?: BasicFormItem
   fileSize?: number | string
   uploadApi?: string
   oss?: boolean
@@ -58,17 +58,19 @@ const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
   uploadList.value = uploadFiles
 }
 
-// 接口需要的属性
-props.item.extra = computed(() =>
-  uploadList.value.map((item: any) => ({
-    name: item.name,
-    url: item.response?.url || item.url
-  }))
-)
 // 动态属性
 const attrs: any = props.oss ? { 'http-request': ossUpload } : {}
-if (!props.item.props?.onSuccess) {
-  attrs['on-success'] = handleUploadSuccess
+if (props.item) {
+  // 接口需要的属性
+  props.item.extra = computed(() =>
+    uploadList.value.map((item: any) => ({
+      name: item.name,
+      url: item.response?.url || item.url
+    }))
+  )
+  if (!props.item.props?.onSuccess) {
+    attrs['on-success'] = handleUploadSuccess
+  }
 }
 </script>
 
@@ -81,7 +83,7 @@ if (!props.item.props?.onSuccess) {
     :on-remove="handleRemove"
     v-bind="{ ...attrs, ...$attrs }"
   >
-    <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
+    <template #[slot.name]="slotProps" v-for="slot in item?.slots" :key="slot.alias">
       <slot :name="slot.alias" v-bind="slotProps">
         <el-button type="primary">上传</el-button>
       </slot>

src/components/form/ElImageUpload.vue

@@ -8,8 +8,8 @@ import type { UploadProps, UploadFile } from 'element-plus'
 import type { BasicFormItem } from '@/types/form'
 
 interface Props {
-  item: BasicFormItem
   modelValue: any
+  item?: BasicFormItem
   size?: number | string
   iconSize?: number | string
   fileSize?: number | string
@@ -88,13 +88,14 @@ const closeViewer = () => {
   showViewer.value = false
 }
 
-// 接口需要的属性
-props.item.extra = computed(() => uploadList.value.map((item: any) => item.response?.url || item.url))
-
 // 动态属性
 const attrs: any = props.oss ? { 'http-request': ossUpload } : {}
-if (!props.item.props?.onSuccess) {
-  attrs['on-success'] = handleUploadSuccess
+if (props.item) {
+  // 接口需要的属性
+  props.item.extra = computed(() => uploadList.value.map((item: any) => item.response?.url || item.url))
+  if (!props.item.props?.onSuccess) {
+    attrs['on-success'] = handleUploadSuccess
+  }
 }
 </script>