refactor(SingleUpload.vue): 优化单图上传组件修改上传方式为自定义，刷新token可控制

src/components/Upload/SingleUpload.vue

@@ -1,36 +1,30 @@
 <template>
   <div>
     <el-upload
-        class="image-uploader"
+        class="avatar-uploader"
-        :headers="headers"
+        action=""
-        :action="uploadAction"
+        list-type="picture-card"
         :show-file-list="false"
-        :on-success="handleUploadSuccess"
         :before-upload="handleBeforeUpload"
         :on-exceed="handleExceed"
         :on-remove="handleRemove"
-        :limit="props.maxCount"
+        :limit="1"
-        :on-preview="handlePreview"
+        :http-request="uploadImage"
     >
-      <img v-if="imgUrl" :src="imgUrl" class="image"/>
+      <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
-      <el-icon v-else class="image-uploader-icon">
+
-        <plus/>
+      <el-icon v-else class="avatar-uploader-icon">
+        <Plus/>
       </el-icon>
     </el-upload>
-
-    <el-dialog v-model="viewDialogVisible">
-      <img width="100%" :src="viewImgUrl">
-    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, toRefs} from "vue";
+import {computed, reactive, toRefs} from "vue";
 import {Plus} from '@element-plus/icons-vue'
 import {ElMessage} from "element-plus"
-import {deleteFile} from "@/api/system/file";
+import {deleteFile, uploadFile} from "@/api/system/file";
-import {Local} from "@/utils/storage";
-
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
@@ -45,10 +39,8 @@ const props = defineProps({
 })
 
 const state = reactive({
-  uploadAction: import.meta.env.VITE_APP_BASE_API+ '/youlai-admin/api/v1/files',
+  previewImgUrl: '',
-  viewImgUrl: '',
+  previewDialogVisible: false,
-  viewDialogVisible: false,
-  headers: {authorization: Local.get('token')}
 })
 
 const imgUrl = computed({
@@ -60,33 +52,38 @@ const imgUrl = computed({
   }
 })
 
-const {uploadAction, viewImgUrl, viewDialogVisible, headers} = toRefs(state)
-
-function handleUploadSuccess(response: any) {
-  const fileUrl = response.data
-  emit('update:modelValue', fileUrl)
-}
-
 function handleBeforeUpload(file: any) {
   const isJPG = file.type === 'image/jpeg'
   const isLt2M = file.size / 1024 / 1024 < 2
-  if (!isJPG) {
+ /* if (!isJPG) {
-  }
+    ElMessage.warning("此文件非图片文件")
+    return false
+  }*/
 
   if (!isLt2M) {
+    ElMessage.warning("上传图片不能大于2M")
   }
   return true
 }
 
-function handleExceed(file: any) {
+/**
-  ElMessage.warning('最多只能上传' + props.maxCount + '')
+ * 自定义图片上传
+ *
+ * @param params
+ */
+function uploadImage(params: any) {
+  const file = params.file
+  uploadFile(file).then(response => {
+    const imgUrl = response.data
+    emit('update:modelValue', imgUrl)
+  })
 }
 
-function handlePreview(file: any) {
+function handleExceed(file: any) {
-  state.viewImgUrl = imgUrl.value as string
+  ElMessage.warning('最多只能上传' + props.maxCount)
-  state.viewDialogVisible = true
 }
 
+
 function handleRemove(file: any, fileList: Array<any>) {
   deleteFile(file.url)
   emit('update:modelValue', fileList)
@@ -94,28 +91,27 @@ function handleRemove(file: any, fileList: Array<any>) {
 </script>
 
 <style lang="scss">
-.image-uploader .el-upload {
+.avatar-uploader {
-  border: 1px dashed #d9d9d9;
+  .el-upload {
-  border-radius: 6px;
+    border: 1px dashed #d9d9d9;
-  cursor: pointer;
+    border-radius: 6px;
-  position: relative;
+    cursor: pointer;
-  overflow: hidden;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+      border-color: #409EFF;
+    }
+  }
 }
 
-.image-uploader .el-upload:hover {
+.avatar-uploader-icon {
-  border-color: #409EFF;
-}
-
-.image-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 148px;
-  height: 148px;
-  line-height: 146px;
   text-align: center;
 }
 
-.image {
+.avatar {
   width: 148px;
   height: 148px;
   display: block;