上传组件增加文件大小限制、上传地址配置

src/components/core/form/FormComp.vue

@@ -3,9 +3,11 @@
 // @ts-nocheck
 
 import type { BasicFormItem } from '@/types/form'
-// import type { UploadProps } from 'element-plus'
+import type { UploadProps } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 import { ACCESS_TOKEN } from '@/utils/constants'
+import { isAbsolutePath } from '@/utils/utils'
 import config from '@/config/defaultSetting'
 
 interface Props {
@@ -32,7 +34,11 @@ const placeholder = (item: BasicFormItem) => {
 
 if (props.item.request) {
   props.item.request(props.item).then((res: any) => {
-    props.item.options = res
+    if (props.item.optionsType == '1') {
+      props.item.trendsOptions = res
+    } else {
+      props.item.options = res
+    }
   })
 }
 
@@ -40,6 +46,21 @@ const user = useUserStore()
 const headers = reactive({
   [ACCESS_TOKEN]: user.token
 })
+
+let uploadApi = baseApi + config.uploadApi
+const uploadProps = props.item.props
+if (uploadProps?.action) {
+  uploadApi = isAbsolutePath(uploadProps.action) ? uploadProps.action : baseApi + uploadProps.action
+}
+
+const fileSize = Number(uploadProps?.fileSize) || 10
+const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
+  if (rawFile.size / 1024 / 1024 > fileSize) {
+    ElMessage.error(`图片大小不能超过${fileSize}MB!`)
+    return false
+  }
+  return true
+}
 // 图片上传
 // const handleUploadSuccess: UploadProps['onSuccess'] = response => {
 //   modelValue.value = config.uploadSuccessCb(response)
@@ -74,7 +95,8 @@ const headers = reactive({
   <el-upload
     v-else-if="item.type === 'upload'"
     v-model:file-list="modelValue"
-    :action="baseApi + config.uploadApi"
+    :action="uploadApi"
+    :before-upload="beforeAvatarUpload"
     :headers="headers"
     v-bind="item.props"
     v-on="item.events || {}"
@@ -104,7 +126,7 @@ const headers = reactive({
     <template v-if="item.type === 'radio-group'">
       <template v-if="item.props?.button">
         <el-radio-button
-          v-for="(option, index) in item.options"
+          v-for="(option, index) in item.optionsType == '1' ? item.trendsOptions : item.options"
           :label="option.label"
           :key="index"
           v-bind="option.props"
@@ -114,7 +136,7 @@ const headers = reactive({
       </template>
       <template v-else>
         <el-radio
-          v-for="(option, index) in item.options"
+          v-for="(option, index) in item.optionsType == '1' ? item.trendsOptions : item.options"
           :label="option.label"
           :key="index"
           :border="item.props?.border"
@@ -127,7 +149,7 @@ const headers = reactive({
     <template v-if="item.type === 'checkbox-group'">
       <template v-if="item.props?.button">
         <el-checkbox-button
-          v-for="(option, index) in item.options"
+          v-for="(option, index) in item.optionsType == '1' ? item.trendsOptions : item.options"
           :label="option.label"
           :value="option.value"
           :key="index"
@@ -138,7 +160,7 @@ const headers = reactive({
       </template>
       <template v-else>
         <el-checkbox
-          v-for="(option, index) in item.options"
+          v-for="(option, index) in item.optionsType == '1' ? item.trendsOptions : item.options"
           :label="option.label"
           :value="option.value"
           :key="index"
@@ -151,7 +173,7 @@ const headers = reactive({
     </template>
     <template v-if="item.type === 'select'">
       <el-option
-        v-for="(option, index) in item.options"
+        v-for="(option, index) in item.optionsType == '1' ? item.trendsOptions : item.options"
         :label="option.label"
         :value="option.value"
         :key="index"

src/components/form/ElImageUpload.vue

@@ -3,16 +3,21 @@ import { useUserStore } from '@/stores/user'
 import { ACCESS_TOKEN } from '@/utils/constants'
 import { ElMessage } from 'element-plus'
 import type { UploadProps } from 'element-plus'
+import { isAbsolutePath } from '@/utils/utils'
 import config from '@/config/defaultSetting'
 
 interface Props {
   modelValue: any
   size?: number | string
   iconSize?: number | string
+  fileSize?: number | string
+  uploadApi?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   size: '148px',
-  iconSize: '28px'
+  iconSize: '28px',
+  uploadApi: config.uploadApi,
+  fileSize: 10
 })
 const emits = defineEmits(['update:modelValue'])
 
@@ -26,6 +31,16 @@ const baseApi = import.meta.env.VITE_BASE_API
 const headers = reactive({
   [ACCESS_TOKEN]: user.token
 })
+
+const fileSize = Number(props.fileSize) || 10
+const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
+  if (rawFile.size / 1024 / 1024 > fileSize) {
+    ElMessage.error(`图片大小不能超过${fileSize}MB!`)
+    return false
+  }
+  return true
+}
+
 // 图片上传
 const handleUploadSuccess: UploadProps['onSuccess'] = response => {
   if (response.success || response.code === 200) {
@@ -39,9 +54,11 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
 <template>
   <el-upload
     :on-success="handleUploadSuccess"
-    :action="baseApi + config.uploadApi"
+    :before-upload="beforeAvatarUpload"
+    :action="isAbsolutePath(props.uploadApi) ? props.uploadApi : baseApi + props.uploadApi"
     :headers="headers"
     :show-file-list="false"
+    accept="image/*"
   >
     <img v-if="modelValue" :src="modelValue" class="avatar" />
     <el-icon v-else class="avatar-uploader-icon" :style="{ fontSize: iconSize }"><Plus /></el-icon>
@@ -69,7 +86,7 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
     object-fit: contain;
   }
 }
-.avatar-uploader-icon {
+.el-icon.avatar-uploader-icon {
   color: #8c939d;
 }
 </style>