分离图片上传组件

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fs-admin",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",

src/assets/main.css

@@ -42,10 +42,17 @@ a {
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
+  width: 178px;
+  height: 178px;
 }
 .avatar-uploader .el-upload:hover {
   border-color: var(--el-color-primary);
 }
+.avatar-uploader .el-upload img{
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
 .el-icon.avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;

src/components.d.ts

@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
     GlobalSetting: typeof import('./components/GlobalSetting.vue')['default']
     GlobalSubMenu: typeof import('./components/GlobalSubMenu.vue')['default']
     GlobalTabs: typeof import('./components/GlobalTabs.vue')['default']
+    ImageUpload: typeof import('./components/ImageUpload.vue')['default']
     OrgLayout: typeof import('./components/org/OrgLayout.vue')['default']
     OrgList: typeof import('./components/org/OrgList.vue')['default']
     ProCardList: typeof import('./components/ProCardList.vue')['default']

src/components/ImageUpload.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { useUserStore } from '@/stores/user'
+import { ACCESS_TOKEN } from '@/utils/constants'
+import { ElMessage } from 'element-plus'
+import type { UploadProps } from 'element-plus'
+
+interface Props {
+  modelValue: any
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: value => emits('update:modelValue', value)
+})
+
+const user = useUserStore()
+const baseApi = import.meta.env.VITE_BASE_API
+const headers = reactive({
+  [ACCESS_TOKEN]: user.token
+})
+// 图片上传
+const handleUploadSuccess: UploadProps['onSuccess'] = response => {
+  if (response.success || response.code === 200) {
+    modelValue.value = import.meta.env.VITE_BASE_PATH + response.data
+  } else {
+    ElMessage.error(response.msg)
+  }
+}
+</script>
+
+<template>
+  <el-upload
+    class="avatar-uploader"
+    :on-success="handleUploadSuccess"
+    :action="baseApi + '/file/upload'"
+    :headers="headers"
+    :show-file-list="false"
+  >
+    <img v-if="modelValue" :src="modelValue" class="avatar" />
+    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+  </el-upload>
+</template>
+
+<style lang="scss" scoped></style>

src/components/form/FormComp.vue

@@ -38,9 +38,9 @@ const headers = reactive({
   [ACCESS_TOKEN]: user.token
 })
 // 图片上传
-const handleUploadSuccess: UploadProps['onSuccess'] = response => {
-  modelValue.value = import.meta.env.VITE_BASE_PATH + response.data
-}
+// const handleUploadSuccess: UploadProps['onSuccess'] = response => {
+//   modelValue.value = import.meta.env.VITE_BASE_PATH + response.data
+// }
 </script>
 
 <template>
@@ -70,18 +70,17 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
   </el-date-picker>
   <el-upload
     v-else-if="item.type === 'upload'"
-    :on-success="handleUploadSuccess"
+    v-model:file-list="modelValue"
     :action="baseApi + '/file/upload'"
     :headers="headers"
     v-bind="item.props"
     v-on="item.events || {}"
   >
-    <img v-if="modelValue" :src="modelValue" class="avatar" />
-    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
     <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
       <slot :name="slot.alias" v-bind="slotProps"></slot>
     </template>
   </el-upload>
+
   <el-select
     v-else-if="item.type === 'select'"
     v-model="modelValue"
@@ -95,7 +94,8 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
       :value="option.value"
       :key="index"
       v-bind="option.props"
-    ></el-option>
+    >
+    </el-option>
     <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">
       <slot :name="slot.alias" v-bind="slotProps"></slot>
     </template>

src/components/index.ts

@@ -1,10 +1,12 @@
 import type { App } from 'vue'
 import ElEditor from './ElEditor.vue'
 import ElDict from './ElDict.vue'
+import ImageUpload from './ImageUpload.vue'
 
 function registerCopmponent(app: App): void {
   app.component('ElEditor', ElEditor)
   app.component('ElDict', ElDict)
+  app.component('ElImageUpload', ImageUpload)
 }
 
 export default registerCopmponent

src/views/form/Basic.vue

@@ -148,6 +148,30 @@ const formConfig = reactive<BasicForm>({
           formConfig.formItems[0].value = undefined
         }
       }
+    },
+    {
+      label: '图片',
+      value: '',
+      name: 'image',
+      type: 'image-upload'
+    },
+    {
+      label: '文件',
+      value: '',
+      name: 'file',
+      type: 'upload',
+      props: {
+        multiple: true,
+        'on-success': (res: any) => {
+          console.log(res)
+        }
+      },
+      slots: [
+        {
+          name: 'default',
+          alias: 'file'
+        }
+      ]
     }
   ]
 })
@@ -168,7 +192,7 @@ const handleSave = () => {
 </script>
 
 <template>
-  <div class="h-full bg-white p-16px pt-50px flex justify-center">
+  <div class="h-full bg-white p-16px pt-50px flex justify-center overflow-auto">
     <div class="w-500px">
       <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
         <template #prepend> testt </template>
@@ -179,6 +203,9 @@ const handleSave = () => {
           <span>{{ data.label }}</span>
           <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
         </template>
+        <template #file>
+          <el-button type="primary">上传</el-button>
+        </template>
       </pro-form>
       <div class="text-center">
         <el-button type="primary" @click="handleSave">保存</el-button>

src/views/miniprogram/Banner.vue

@@ -24,12 +24,8 @@ const formConfig = reactive<BasicForm>({
       label: '图片',
       value: '',
       name: 'image',
-      type: 'upload',
-      rules: [{ required: true, message: '请上传图片', trigger: 'blur' }],
-      props: {
-        class: 'avatar-uploader',
-        'show-file-list': false
-      }
+      type: 'image-upload',
+      rules: [{ required: true, message: '请上传图片', trigger: 'blur' }]
     },
     {
       label: '标题',