上传组件优化

src/components/com/uploadCom.vue

@@ -1,40 +1,48 @@
 <template>
-    <div>
+    <div class="upload_ss_c">
         <!--action="/api/abk/web/v1/resource/file" -->
-        <el-upload :action="actionUrl" :auto-upload="autoUpload" style="width: 100%" :on-success="(response, file) => successUpload(response, file)"
+        <el-upload :action="actionUrl" :auto-upload="autoUpload" style="width: 100%"
-            :on-error="errorUpload" :accept="acceptTypeList.join(',')" :before-upload="beforeUpload" :multiple="multiple"
+            :on-success="(response, file) => successUpload(response, file)" :on-error="errorUpload"
-            :limit="maxLimit" :on-exceed="handleExceed" :file-list="fileList" :disabled="disabledFlag"
+            :accept="acceptTypeList.join(',')" :before-upload="beforeUpload" :multiple="multiple" :limit="maxLimit"
+            :on-exceed="handleExceed" :file-list="fileList" :disabled="disabledFlag"
             :on-remove="(file, fileList) => removeFile(file, fileList)" :on-preview="(file) => preview(file)"
-            :on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)"
+            :on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)" list-type="picture-card">
-            list-type="picture-card"
-            
-            >
             <!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
-            <slot name="uploadBtn"></slot>
+            <slot name="default"></slot>
         </el-upload>
         <el-progress v-if="showProcessFlag && processFlag" :percentage="loadProcess"></el-progress>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref ,nextTick} from "vue"
+import { ref, nextTick } from "vue"
 import { ElMessage } from 'element-plus'
-import {Base64} from 'js-base64'
+import { Base64 } from 'js-base64'
 const props = defineProps({
     actionUrl: {
         //上传的地址
         type: String,
         default: '',
     },
-    autoUpload:{//是否开启自动上传
+    width: {
-        type:Boolean,
+        //上传的地址
-        default:false
+        type: String,
+        default: '72px',
+    },
+    height: {
+        //上传的地址
+        type: String,
+        default: '72px',
+    },
+    autoUpload: {//是否开启自动上传
+        type: Boolean,
+        default: false
     },
     acceptTypeList: {
         //接受的文件类型
         type: Array,
         default: () => {
-            return ['.jpg','.jpeg','.png']
+            return ['.jpg', '.jpeg', '.png']
             //  ['doc', 'docx', 'xlsx', 'xls', 'txt', 'pdf','jpg','jpeg','png','zip,'rar']
         },
     },
@@ -61,10 +69,10 @@ const props = defineProps({
     fileList: {//文件列表
         type: Array,
         default: () => {
-            return [ ]
+            return []
         },
     },
-    listType:{
+    listType: {
         type: String,//'text' | 'picture' | 'picture-card'
         default: 'picture',
     },
@@ -117,8 +125,8 @@ let loadProcess = ref(0)//进度条的刻度值
  
 
 // 上传图片 成功
-const successUpload = (response:any, file:any) => {
+const successUpload = (response: any, file: any) => {
-    console.log("successUpload",response,file)
+    console.log("successUpload", response, file)
     if (response.rt.status === 200) {
         props.fileList.push({
             url: response.data,
@@ -148,7 +156,7 @@ const beforeUpload = (file) => {
         return false
     }
 
-    if (!props.acceptTypeList.includes(name.split('.').pop())+'.') {
+    if (!props.acceptTypeList.includes(name.split('.').pop()) + '.') {
         ElMessage({
             type: 'warning',
             message: `文件格式仅支持${props.acceptTypeList.join(',')}M`
@@ -214,20 +222,30 @@ const preview = (data) => {
 }
 
 
-   const onProgressFn=(event, file, fileList)=>{
+const onProgressFn = (event, file, fileList) => {
-        processFlag.value = true
+    processFlag.value = true
-        loadProcess.value  = event.percent.toFixed(2)
+    loadProcess.value = event.percent.toFixed(2)
-        if (loadProcess.value >= 100) {
+    if (loadProcess.value >= 100) {
-            loadProcess.value = 100
+        loadProcess.value = 100
-            nextTick(() => {
+        nextTick(() => {
-                processFlag.value = false
+            processFlag.value = false
-            })
+        })
-        }
     }
+}
 
 </script>
 
  
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-upload){
+    width: v-bind('props.width')!important;
+    height: v-bind('props.height')!important;
+}
+:deep(.el-upload-list__item){
+    width: v-bind('props.width')!important;
+    height: v-bind('props.height')!important;
+}
 
+</style>
+<style></style>

src/views/configuration/swiperConfig/com/addCom.vue

@@ -5,11 +5,14 @@
         <el-input v-model.trim="form.title" placeholder="请输入标题" clearable maxlength="30" />
       </el-form-item>
       <el-form-item label="图片：" prop="picture">
-        <uploadCom :maxLimit="3" listType="picture-card" :acceptTypeList="['.jpg','.jpeg','.png']">
+ 
-          <template v-slot:uploadBtn>
+          <uploadCom :maxLimit="3" listType="picture-card" :acceptTypeList="['.jpg','.jpeg','.png']" width="72px" height="72px">
-            <el-icon size="48" color="#aaa"><Plus /></el-icon>
+            <template v-slot:default>
-          </template>
+              <el-icon size="48" color="#aaa"><Plus /></el-icon>
-        </uploadCom>
+            </template>
+          </uploadCom>
+
+ 
       </el-form-item>
       <el-form-item label="跳转链接：" prop="linkUrl">
         <el-input v-model.trim="form.linkUrl" clearable />