liu
6 天以前 5c124cdf26e4d749eae1e7fc9df366e9a5f4d259
src/components/upload/file-upload.vue
@@ -10,12 +10,9 @@
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { checkFileType, isFunction, isImage, isObject, isString } from '@vben/utils';
import { checkFileType, isFunction, isObject, isString } from '@vben/utils';
import { Button, message, Upload } from 'ant-design-vue';
import { requestClient } from '#/api/request';
import { FilePreviewModal, useFilePreview } from '#/components/file-preview';
import { UploadResultStatus } from './typing';
import { useUpload, useUploadType } from './use-upload';
@@ -142,31 +139,14 @@
  }
}
const { openPreview, previewState } = useFilePreview();
const previewLoading = ref(false);
/** 处理文件预览 */
async function handlePreview(file: UploadFile) {
function handlePreview(file: UploadFile) {
  const url = (file as any)?.url || (file as any)?.response?.url || (file as any)?.response;
  if (!url) {
    message.warning('文件地址不存在,无法预览');
    return;
  }
  const name = file.name || (file as any)?.fileName || '';
  if (isImage(name || url)) {
    window.open(url, '_blank');
    return;
  }
  previewLoading.value = true;
  try {
    const blob = await requestClient.get(url, { responseType: 'blob' }) as unknown as Blob;
    const blobUrl = URL.createObjectURL(blob);
    openPreview(blobUrl, name);
  } catch {
    message.error('文件加载失败,请尝试下载后查看');
  } finally {
    previewLoading.value = false;
  }
  window.open(url, '_blank');
  emit('preview', file);
}
@@ -312,14 +292,14 @@
      :progress="{ showInfo: true }"
      :show-upload-list="{
        showPreviewIcon: true,
        showRemoveIcon: true,
        showRemoveIcon: !disabled,
        showDownloadIcon,
      }"
      @remove="handleRemove"
      @preview="handlePreview"
      @reject="handleExceed"
    >
      <div v-if="drag" class="upload-drag-area">
      <div v-if="drag && !disabled" class="upload-drag-area">
        <p class="ant-upload-drag-icon">
          <IconifyIcon icon="lucide:cloud-upload" />
        </p>
@@ -328,7 +308,9 @@
          支持{{ accept.join('/') }}格式文件,不超过{{ maxSize }}MB
        </p>
      </div>
      <div v-else-if="fileList && fileList.length < maxNumber">
      <div
        v-else-if="!disabled && fileList && fileList.length < maxNumber"
      >
        <Button>
          <IconifyIcon icon="lucide:cloud-upload" />
          {{ $t('ui.upload.upload') }}
@@ -345,11 +327,6 @@
        格式文件
      </div>
    </Upload>
    <FilePreviewModal
      v-model:visible="previewState.visible.value"
      :file-url="previewState.fileUrl.value"
      :file-name="previewState.fileName.value"
    />
  </div>
</template>