refactor: 事件函数命名:onXxx

This commit is contained in:
dhb52 2023-04-16 22:32:59 +08:00
parent b5fb700e4e
commit 84dcac77b1
3 changed files with 34 additions and 20 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 {