From 84dcac77b16ccb6ff8e9cec14ac077d0cc60fdb8 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sun, 16 Apr 2023 22:32:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BA=8B=E4=BB=B6=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=91=BD=E5=90=8D=EF=BC=9AonXxx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mp/material/components/UploadFile.vue     | 31 +++++++++++++------
 .../mp/material/components/UploadVideo.vue    | 22 +++++++------
 src/views/mp/material/components/upload.ts    |  1 -
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/views/mp/material/components/UploadFile.vue b/src/views/mp/material/components/UploadFile.vue
index 93e6dd41..be7e323b 100644
--- a/src/views/mp/material/components/UploadFile.vue
+++ b/src/views/mp/material/components/UploadFile.vue
@@ -6,13 +6,13 @@
     :limit="1"
     :file-list="fileList"
     :data="uploadData"
-    :on-progress="() => (uploading = true)"
-    :on-error="(err: Error) => message.error(`上传失败: ${err.message}`)"
-    :before-upload="beforeUpload"
-    :on-success="handleUploadSuccess"
+    :on-progress="(isUploading = true)"
+    :on-error="onUploadError"
+    :before-upload="onBeforeUpload"
+    :on-success="onUploadSuccess"
   >
-    <el-button type="primary" plain :loading="uploading" :disabled="uploading">
-      {{ uploading ? '正在上传' : '点击上传' }}
+    <el-button type="primary" plain :loading="isUploading" :disabled="isUploading">
+      {{ isUploading ? '正在上传' : '点击上传' }}
     </el-button>
     <template #tip>
       <span class="el-upload__tip" style="margin-left: 5px">
@@ -46,11 +46,13 @@ const uploadData: UploadData = reactive({
   title: '',
   introduction: ''
 })
-const uploading = ref(false)
+const isUploading = ref(false)
 
-const beforeUpload = props.type === MaterialType.Image ? beforeImageUpload : beforeVoiceUpload
+/** 上传前检查 */
+const onBeforeUpload = props.type === MaterialType.Image ? beforeImageUpload : beforeVoiceUpload
 
-const handleUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
+/** 上传成功处理 */
+const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
   if (res.code !== 0) {
     message.alertError('上传出错：' + res.msg)
     return false
@@ -62,7 +64,16 @@ const handleUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
   uploadData.introduction = ''
 
   message.notifySuccess('上传成功')
-  uploading.value = false
+  isUploading.value = false
   emit('uploaded')
 }
+
+/** 上传失败处理 */
+const onUploadError = (err: Error) => message.error('上传失败: ' + err.message)
 </script>
+
+<style lang="scss" scoped>
+.el-upload__tip {
+  margin-left: 5px;
+}
+</style>
diff --git a/src/views/mp/material/components/UploadVideo.vue b/src/views/mp/material/components/UploadVideo.vue
index 1221273b..8e374767 100644
--- a/src/views/mp/material/components/UploadVideo.vue
+++ b/src/views/mp/material/components/UploadVideo.vue
@@ -8,9 +8,9 @@
       :file-list="fileList"
       :data="uploadData"
       :before-upload="beforeVideoUpload"
-      :on-progress="() => (uploading = true)"
-      :on-error="(err: Error) => message.error(`上传失败: ${err.message}`)"
-      :on-success="handleUploadSuccess"
+      :on-progress="(isUploading = true)"
+      :on-error="onUploadError"
+      :on-success="onUploadSuccess"
       ref="uploadVideoRef"
       :auto-upload="false"
       class="mb-5"
@@ -23,7 +23,7 @@
       >
     </el-upload>
     <el-divider />
-    <el-form :model="uploadData" :rules="uploadRules" ref="uploadFormRef" v-loading="uploading">
+    <el-form :model="uploadData" :rules="uploadRules" ref="uploadFormRef" v-loading="isUploading">
       <el-form-item label="标题" prop="title">
         <el-input
           v-model="uploadData.title"
@@ -41,7 +41,7 @@
     </el-form>
     <template #footer>
       <el-button @click="showDialog = false">取 消</el-button>
-      <el-button type="primary" @click="submitVideo" :loading="uploading" :disabled="uploading"
+      <el-button type="primary" @click="submitVideo" :loading="isUploading" :disabled="isUploading"
         >提 交</el-button
       >
     </template>
@@ -76,7 +76,7 @@ const emit = defineEmits<{
   (e: 'uploaded', v: void)
 }>()
 
-const showDialog = computed({
+const showDialog = computed<boolean>({
   get() {
     return props.modelValue
   },
@@ -85,7 +85,7 @@ const showDialog = computed({
   }
 })
 
-const uploading = ref(false)
+const isUploading = ref(false)
 
 const fileList = ref<UploadUserFile[]>([])
 
@@ -107,8 +107,9 @@ const submitVideo = () => {
   })
 }
 
-const handleUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
-  uploading.value = false
+/** 上传成功处理 */
+const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
+  isUploading.value = false
   if (res.code !== 0) {
     message.error('上传出错：' + res.msg)
     return false
@@ -123,4 +124,7 @@ const handleUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
   message.notifySuccess('上传成功')
   emit('uploaded')
 }
+
+/** 上传失败处理 */
+const onUploadError = (err: Error) => message.error(`上传失败: ${err.message}`)
 </script>
diff --git a/src/views/mp/material/components/upload.ts b/src/views/mp/material/components/upload.ts
index 239665a2..ac6f3a1f 100644
--- a/src/views/mp/material/components/upload.ts
+++ b/src/views/mp/material/components/upload.ts
@@ -2,7 +2,6 @@ import type { UploadProps, UploadRawFile } from 'element-plus'
 import { getAccessToken } from '@/utils/auth'
 const message = useMessage() // 消息
 const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 请求头
-// const UPLOAD_URL = 'http://127.0.0.1:8000/upload/' // 上传地址
 const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传地址
 
 enum MaterialType {