主页管理

src/views/page-config/component/ConfigEidt.vue

@@ -30,9 +30,22 @@
           </el-radio-group></div
         >
       </div>
-      <el-button type="info" :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
-        >替换照片</el-button
+      <el-upload
+        ref="upload"
+        class="upload-demo"
+        :limit="1"
+        :on-exceed="handleExceed"
+        :auto-upload="false"
       >
+        <template #trigger>
+          <el-button :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
+            >替换照片</el-button
+          >
+        </template>
+      </el-upload>
+      <!-- <el-button type="info" :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
+        >替换照片</el-button
+      > -->
       <el-button type="info" plain class="btn-top-save" @click="saveConfig">保存</el-button>
       <!-- <div>按钮</div> -->
     </div>
@@ -50,27 +63,29 @@
           ><li v-for="item in workshopList" class="workshop-list">{{ item.value }}</li></ul
         >
       </div>
-      <div class="upload">
-        <el-upload
-          class="avatar-uploader"
-          :class="{ 'avatar-show': imageUrl }"
-          list-type="picture-card"
-          :auto-upload="false"
-          :on-change="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
+      <div>
+        <div class="upload" :class="{ 'avatar-show': imageUrl ? true : false }">
+          <el-upload
+            class="avatar-uploader"
+            list-type="picture-card"
+            :auto-upload="false"
+            :on-change="onSelectfile"
+            :before-upload="beforeAvatarUpload"
+          >
+            <!-- list-type="picture-card" -->
+            <!-- <div class="el-upload__text"> Drop file here or </div> -->
+            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
+            <div>
+              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              <div class="uploader-text">上传照片</div>
+            </div>
+            <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+          </el-upload>
+          <div class="upload-tip">只支持.jpg格式</div></div
         >
-          <!-- <div class="el-upload__text"> Drop file here or </div> -->
-          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
-          <div>
-            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
-            <div class="uploader-text">上传照片</div>
-          </div>
-          <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
-        </el-upload>
-        <div v-if="imageUrl">
-          <img :src="imageUrl" class="preview-image" />
-        </div>
-        <div class="upload-tip">只支持.jpg格式</div>
+
+        <img v-if="imageUrl" :src="imageUrl" class="preview-image" />
+        <!-- <div>222</div> -->
       </div></div
     >
   </div>
@@ -80,7 +95,9 @@
   import { Refresh, Search, Delete, Plus } from '@element-plus/icons-vue';
   import { picList } from '../constant';
   import { labelList, companyList, workshopList } from '../constant';
-  import { ElMessage, UploadProps } from 'element-plus';
+  import { ElMessage, genFileId } from 'element-plus';
+  import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
+  // import upload, { UploadRawFile, genFileId } from 'element-plus/es/components/upload';
 
   const props = defineProps<{
     pageShow: boolean;
@@ -103,7 +120,7 @@
 
   const imageUrl = ref('');
 
-  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const beforeAvatarUpload = (rawFile) => {
     if (rawFile.type !== 'image/jpeg') {
       ElMessage.error('Avatar picture must be JPG format!');
       return false;
@@ -115,8 +132,19 @@
     return true;
   };
 
-  const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+  const onSelectfile = (uploadFile) => {
+    console.log('2333');
+
     imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+    console.log('12333');
+  };
+
+  const upload = ref<UploadInstance>();
+  const handleExceed: UploadProps['onExceed'] = (files) => {
+    upload.value!.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    upload.value!.handleStart(file);
   };
 
   // const label = ref('');
@@ -165,6 +193,8 @@
   .avatar-uploader .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
+    width: 260px;
+    height: 280px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -197,6 +227,7 @@
     font-weight: 350;
     color: #3d3d3d;
     opacity: 0.4;
+    text-align: center;
   }
 
   .uploader-text {
@@ -217,7 +248,7 @@
   .preview-image {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 
   .avatar-show {