From bef4a1a94cbf12c945deace7d76858e93dcf6a2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 8 Jan 2022 18:44:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor(SingleUpload.vue):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=8D=95=E5=9B=BE=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=8A=E4=BC=A0=E6=96=B9=E5=BC=8F=E4=B8=BA?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=EF=BC=8C=E5=88=B7=E6=96=B0token?=
 =?UTF-8?q?=E5=8F=AF=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/SingleUpload.vue | 96 ++++++++++++--------------
 1 file changed, 46 insertions(+), 50 deletions(-)

diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index aa100cdf..1b42e49e 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -1,36 +1,30 @@
 <template>
   <div>
     <el-upload
-        class="image-uploader"
-        :headers="headers"
-        :action="uploadAction"
+        class="avatar-uploader"
+        action=""
+        list-type="picture-card"
         :show-file-list="false"
-        :on-success="handleUploadSuccess"
         :before-upload="handleBeforeUpload"
         :on-exceed="handleExceed"
         :on-remove="handleRemove"
-        :limit="props.maxCount"
-        :on-preview="handlePreview"
+        :limit="1"
+        :http-request="uploadImage"
     >
-      <img v-if="imgUrl" :src="imgUrl" class="image"/>
-      <el-icon v-else class="image-uploader-icon">
-        <plus/>
+      <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
+
+      <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 {Local} from "@/utils/storage";
-
+import {deleteFile, uploadFile} from "@/api/system/file";
 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',
-  viewImgUrl: '',
-  viewDialogVisible: false,
-  headers: {authorization: Local.get('token')}
+  previewImgUrl: '',
+  previewDialogVisible: false,
 })
 
 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) {
-  state.viewImgUrl = imgUrl.value as string
-  state.viewDialogVisible = true
+function handleExceed(file: any) {
+  ElMessage.warning('最多只能上传' + props.maxCount)
 }
 
+
 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 {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
+.avatar-uploader {
+  .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+      border-color: #409EFF;
+    }
+  }
 }
 
-.image-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-
-.image-uploader-icon {
+.avatar-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;