批量推送代码

ry-vue3/src/components/OssFileUploader.vue

@@ -10,8 +10,12 @@
     />
 -->
 <template>
-  <div class="ht-file-upload" :class="{ 'has-file': modelValue, 'is-block': block, readonly }" @click="handleClick">
-    <div v-if="!modelValue && !readonly" class="ht-file-placeholder">
+  <div class="ht-file-upload" :class="{ 'has-file': modelValue, 'is-block': block, readonly, uploading }" @click="handleClick">
+    <div v-if="uploading" class="ht-file-progress">
+      <span class="progress-label">上传中</span>
+      <el-progress :percentage="progress" :stroke-width="6" class="progress-bar" />
+    </div>
+    <div v-else-if="!modelValue && !readonly" class="ht-file-placeholder">
       <span class="placeholder-text">{{ placeholder }}</span>
       <span class="placeholder-hint" v-if="hint">{{ hint }}</span>
     </div>
@@ -69,6 +73,7 @@ const emit = defineEmits(['update:modelValue', 'update:name'])
 
 const fileInput = ref(null)
 const uploading = ref(false)
+const progress = ref(0)
 
 const fileName = computed(() => {
   // 优先用调用方回传的原文件名 (v-model:name); 没有则从 OSS key 还原原名
@@ -132,8 +137,9 @@ async function onFileChange(e) {
     return ElMessage.warning(`文件大小不能超过 ${props.maxSize}MB`)
   }
   uploading.value = true
+  progress.value = 0
   try {
-    const url = await uploadToOss(file, props.dir)
+    const url = await uploadToOss(file, props.dir, (p) => { progress.value = p })
     emit('update:modelValue', url)
     emit('update:name', file.name)
     ElMessage.success('上传成功')
@@ -167,6 +173,18 @@ function onRemove() {
 .ht-file-upload.has-file { border-style: solid; border-color: #52c41a; background: #fff; }
 .ht-file-upload.is-block { width: 100%; }
 .ht-file-upload.readonly { cursor: default; }
+.ht-file-upload.uploading { cursor: default; }
+
+/* 上传进度条 */
+.ht-file-progress {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.progress-label { font-size: 13px; color: #606266; white-space: nowrap; flex-shrink: 0; }
+.progress-bar { flex: 1; }
 
 .ht-file-placeholder {
   flex: 1;