|
@@ -7,14 +7,21 @@
|
|
:on-exceed="uploadExceed" :on-preview="uploadPreview" :on-progress="uploadprogress"
|
|
:on-exceed="uploadExceed" :on-preview="uploadPreview" :on-progress="uploadprogress"
|
|
:on-remove="uploadRemove" :on-success="uploadSuccess" class="hc-upload-border"
|
|
:on-remove="uploadRemove" :on-success="uploadSuccess" class="hc-upload-border"
|
|
drag multiple
|
|
drag multiple
|
|
|
|
+ :auto-upload="autoUpload"
|
|
>
|
|
>
|
|
- <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading">
|
|
|
|
- <HcIcon name="backup" ui="text-5xl mt-4" />
|
|
|
|
- <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <template #trigger>
|
|
|
|
+ <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading" @click="submitUpload">
|
|
|
|
+ <HcIcon name="backup" ui="text-5xl mt-4" />
|
|
|
|
+ <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em></div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
<template #tip>
|
|
<template #tip>
|
|
<div class="el-upload__tip" style="font-size: 14px;">
|
|
<div class="el-upload__tip" style="font-size: 14px;">
|
|
{{ acceptTip }}
|
|
{{ acceptTip }}
|
|
|
|
+ <el-button v-if="!autoUpload" class="right-3 absolute" type="primary" @click="submitUpload">
|
|
|
|
+ 确认上传
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-upload>
|
|
</el-upload>
|
|
@@ -53,7 +60,14 @@ const props = defineProps({
|
|
type:String,
|
|
type:String,
|
|
default:'允许格式:jpg/png/pdf/excel/word, 文件大小 小于 60MB',
|
|
default:'允许格式:jpg/png/pdf/excel/word, 文件大小 小于 60MB',
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+ autoUpload:{
|
|
|
|
+ type:Boolean,
|
|
|
|
+ default:true,
|
|
|
|
+ },
|
|
|
|
+ typevalue:{
|
|
|
|
+ type:[String, Number],
|
|
|
|
+ default:'',
|
|
|
|
+ }, //附件类型
|
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
@@ -67,6 +81,8 @@ const accept = ref(props.accept)
|
|
const acceptTip = ref(props.acceptTip)
|
|
const acceptTip = ref(props.acceptTip)
|
|
const uploadDisabled = ref(false)
|
|
const uploadDisabled = ref(false)
|
|
const isCanuploadVal = ref(props.isCanupload)
|
|
const isCanuploadVal = ref(props.isCanupload)
|
|
|
|
+const autoUpload = ref(props.autoUpload)
|
|
|
|
+const typevalue = ref(props.typevalue)
|
|
|
|
|
|
|
|
|
|
//监听
|
|
//监听
|
|
@@ -77,15 +93,18 @@ watch(() => [
|
|
props.action,
|
|
props.action,
|
|
props.accept,
|
|
props.accept,
|
|
props.acceptTip,
|
|
props.acceptTip,
|
|
|
|
+ props.autoUpload,
|
|
|
|
+ props.typevalue,
|
|
|
|
|
|
-], ([fileList, datas, isCanupload, Action, Accept, Tip]) => {
|
|
|
|
|
|
+], ([fileList, datas, isCanupload, Action, Accept, Tip, auto, type]) => {
|
|
uploadData.value = datas
|
|
uploadData.value = datas
|
|
fileListData.value = fileList
|
|
fileListData.value = fileList
|
|
isCanuploadVal.value = isCanupload
|
|
isCanuploadVal.value = isCanupload
|
|
action.value = Action
|
|
action.value = Action
|
|
accept.value = Accept
|
|
accept.value = Accept
|
|
acceptTip.value = Tip
|
|
acceptTip.value = Tip
|
|
-
|
|
|
|
|
|
+ autoUpload.value = auto
|
|
|
|
+ typevalue.value = type
|
|
})
|
|
})
|
|
|
|
|
|
//渲染完成
|
|
//渲染完成
|
|
@@ -155,7 +174,7 @@ const delUploadData = async (res) => {
|
|
const { id, status } = res
|
|
const { id, status } = res
|
|
|
|
|
|
if (accept.value === 'application/pdf') {
|
|
if (accept.value === 'application/pdf') {
|
|
- if (status === 'uploading') {
|
|
|
|
|
|
+ if (!id || status === 'uploading') {
|
|
uploadRef.value.abort()
|
|
uploadRef.value.abort()
|
|
uploadDisabled.value = false
|
|
uploadDisabled.value = false
|
|
return true
|
|
return true
|
|
@@ -175,7 +194,7 @@ const delUploadData = async (res) => {
|
|
}
|
|
}
|
|
|
|
|
|
} else {
|
|
} else {
|
|
- if (status === 'uploading') {
|
|
|
|
|
|
+ if (!id || status === 'uploading') {
|
|
uploadRef.value.abort()
|
|
uploadRef.value.abort()
|
|
uploadDisabled.value = false
|
|
uploadDisabled.value = false
|
|
return true
|
|
return true
|
|
@@ -202,4 +221,13 @@ const uploadRemove = () => {
|
|
emit('change', { type: 'del' })
|
|
emit('change', { type: 'del' })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+const submitUpload = () => {
|
|
|
|
+ if (!typevalue.value && !autoUpload.value) {
|
|
|
|
+ window.$message.warning('请先选择附件类型')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ uploadRef.value.submit()
|
|
|
|
+}
|
|
</script>
|
|
</script>
|