上传文件

src/layout/index.vue

@@ -13,8 +13,8 @@
                 <TopMenu />
             </div>
             <div class="header-content-bar">
-                <HcRefresh />
                 <HcGlobalUpload />
+                <HcRefresh />
                 <HcColor />
                 <HcTheme />
                 <UserInfoBar @load="userInfoLoad" />

src/layout/modules/Upload.vue

@@ -1,30 +1,32 @@
 <template>
-    <div class="header-icon-bar" @click="uploadClick">
-        <el-tooltip content="全局文件上传" placement="top">
-            <hc-icon name="upload-cloud" class="header-icon" />
+    <div class="header-icon-bar hc-header-upload-file-bar">
+        <el-tooltip :content="isUploading ? '文件正在上传时，千万不要刷新页面' : '全局文件上传'" placement="top">
+            <div class="hc-upload-bar hc-flex" :class="[isUploading ? 'uploading' : '']" @click="uploadClick">
+                <hc-lottie v-if="isUploading" class="hc-lottie-icon" :datas="uploadJson" />
+                <hc-icon v-else name="upload-cloud" class="header-icon" />
+                <span v-if="isUploading" class="text">正在上传中...</span>
+            </div>
         </el-tooltip>
+        <!-- 上传文件 -->
+        <hc-upload-file
+            ref="uploadRef"
+            :params="params"
+            :echo-params="echoParams"
+            :options="options"
+            @progress="uploadProgress"
+            @error="uploadError"
+            @cancel="uploadCancel"
+            @item="uploadItem"
+            @finish="uploadFinish"
+            @success="uploadSuccess"
+        />
     </div>
-    <!-- 上传文件 -->
-    <hc-upload-file
-        ref="uploadRef"
-        :params="params"
-        :echo-params="echoParams"
-        modal="drawer"
-        :options="options"
-        :drop="isDrop"
-        use-file
-        @progress="uploadProgress"
-        @error="uploadError"
-        @cancel="uploadCancel"
-        @item="uploadItem"
-        @finish="uploadFinish"
-        @success="uploadSuccess"
-    />
 </template>
 
 <script setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import HcUpload from '~src/plugins/HcUpload'
+import uploadJson from '~src/assets/upload.json'
 import { emitter } from 'hc-vue3-ui'
 import { useRoute } from 'vue-router'
 const useRoutes = useRoute()
@@ -47,7 +49,7 @@ const uploadRef = ref(null)
 const params = ref({})
 const echoParams = ref({})
 const options = ref({})
-const isDrop = ref(false)
+const isUploading = ref(false)
 
 //注册监听事件
 const setEmitterData = () => {
@@ -56,7 +58,6 @@ const setEmitterData = () => {
             params.value = data.params
             echoParams.value = data.echoParams
             options.value = data.options
-            isDrop.value = data.isDrop
         } else if (key === 'show') {
             uploadRef.value?.setModalShow(true)
         } else if (key === 'close') {
@@ -68,7 +69,7 @@ const setEmitterData = () => {
         } else if (key === 'cancel') {
             uploadRef.value?.allCancel()
         } else if (key === 'getUploading') {
-            const bool = uploadRef.value?.getIsUploading()
+            const bool = getIsUploading()
             emitter.emit(`${EVENT_KEY}-get-uploading`, bool)
         }
     })
@@ -76,21 +77,25 @@ const setEmitterData = () => {
 
 //文件上传中，此事件是单个文件上传中时会触发
 const uploadProgress = ({ file, status }) => {
+    isUploading.value = true
     emitter.emit(`${EVENT_KEY}-progress`, { file, status })
 }
 
 //文件上传失败 ，返回一个当前文件的数据对象
 const uploadError = (file) => {
+    isUploading.value = getIsUploading()
     emitter.emit(`${EVENT_KEY}-error`, file)
 }
 
 //文件上传成功，返回一个当前文件的数据对象
 const uploadSuccess = (file) => {
+    isUploading.value = getIsUploading()
     emitter.emit(`${EVENT_KEY}-success`, file)
 }
 
 //取消上传并从列表中移除
 const uploadCancel = ({ item, index }) => {
+    isUploading.value = getIsUploading()
     emitter.emit(`${EVENT_KEY}-cancel`, { item, index })
 }
 
@@ -101,15 +106,20 @@ const uploadItem = ({ item, index }) => {
 
 //全部文件上传完成
 const uploadFinish = (files) => {
+    isUploading.value = getIsUploading()
     emitter.emit(`${EVENT_KEY}-finish`, files)
 }
 
 //展开上传文件
 const uploadClick = () => {
-    console.log('展开上传文件')
     uploadRef.value?.setModalShow(true)
 }
 
+//是否还有正在上传中的文件
+const getIsUploading = () => {
+    return uploadRef.value?.getIsUploading()
+}
+
 //页面被注销，关闭监听事件
 onUnmounted(() => {
     emitter.off(EVENT_KEY)
@@ -118,5 +128,28 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
+.hc-header-upload-file-bar .hc-upload-bar {
+    .hc-lottie-icon {
+        display: none;
+        position: relative;
+        height: 24px;
+    }
+    .text {
+        display: none;
+        font-size: 14px;
+        margin-left: 6px;
+        color: var(--el-color-primary-dark-2);
+    }
+    &.uploading {
+        padding: 0 10px 0 0;
+        border-radius: 50px;
+        background: var(--el-color-primary-light-8);
+        .header-icon {
+            display: none;
+        }
+        .hc-lottie-icon, .text {
+            display: block;
+        }
+    }
+}
 </style>

src/plugins/HcUpload.js

@@ -20,12 +20,9 @@ export default class HcUpload {
     //回显参数，此参数不会提交服务器，只会在事件里返回
     static uploadEchoParams = {}
 
-    //是否为拖动上传
-    static uploadDrop = false
-
     //初始化参数
     static init(parameter = {}) {
-        const { options, params, echoParams, drop, key } = getObjValue(parameter)
+        const { options, params, echoParams, key } = getObjValue(parameter)
         //上传文件的配置
         const options_data = getObjValue(options)
         this.uploadOptions = {
@@ -54,14 +51,11 @@ export default class HcUpload {
             ...getObjValue(echoParams),
             pageKey: this.pageKey,
         }
-        //是否为拖动上传
-        this.uploadDrop = drop ?? false
         //发送相关配置参加给文件上传
         this.sendEmit('params', {
             options: this.uploadOptions,
             params: this.uploadParams,
             echoParams: this.uploadEchoParams,
-            drop: this.uploadDrop,
         })
     }