src/components/Attachment/lims-attachment.vue
@@ -5,7 +5,7 @@
        <div class="el-upload__tip">
          {{ readonly ? '仅可预览、下载附件' : ((currentId || deferUpload) ? tip : emptyTip) }}
        </div>
        <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple
        <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple :accept="accept"
          :show-file-list="false" :disabled="!canUpload" :auto-upload="!deferUpload"
          :on-change="handleFileChange" :on-success="handleUploadSuccess"
          :on-error="handleUploadError">
@@ -18,6 +18,7 @@
        <el-table-column label="操作" width="170">
          <template #default="scope">
            <template v-if="scope.row.pending">
              <el-button link type="primary" @click="previewPending(scope.row)">预览</el-button>
              <el-button link type="danger" @click="removePending(scope.row)">删除</el-button>
            </template>
            <template v-else>
@@ -32,7 +33,7 @@
    <el-dialog v-else :title="dialogTitle" v-model="visible" width="760px" append-to-body @close="$emit('closed')">
      <div class="attachment-header">
        <div class="el-upload__tip">{{ readonly ? '仅可预览、下载附件' : tip }}</div>
        <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple
        <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple :accept="accept"
          :show-file-list="false" :on-success="handleUploadSuccess" :on-error="handleUploadError">
          <el-button size="small" type="primary">上传附件</el-button>
        </el-upload>
@@ -52,7 +53,7 @@
        <el-button @click="visible = false">关 闭</el-button>
      </template>
    </el-dialog>
    <el-dialog title="预览附件" v-model="previewVisible" fullscreen append-to-body>
    <el-dialog title="预览附件" v-model="previewVisible" fullscreen append-to-body @close="releasePreviewBlob">
      <file-preview v-if="previewVisible" :file-url="previewUrl" :current-file="previewRow" />
    </el-dialog>
  </div>
@@ -147,6 +148,11 @@
    deferUpload: {
      type: Boolean,
      default: false
    },
    // 允许选择的文件类型,如 .jpg,.png;为空不限制
    accept: {
      type: String,
      default: ''
    }
  },
  watch: {
@@ -173,7 +179,8 @@
      currentRow: {},
      previewVisible: false,
      previewRow: {},
      previewUrl: ''
      previewUrl: '',
      previewBlobUrl: ''
    }
  },
  computed: {
@@ -201,6 +208,9 @@
    uploadAction() {
      return this.javaApi + this.uploadUrl + '?' + this.idParam + '=' + this.currentId
    }
  },
  beforeUnmount() {
    this.releasePreviewBlob()
  },
  methods: {
    // 打开附件管理弹窗
@@ -293,7 +303,26 @@
        this.loadList()
      })
    },
    // 待上传文件用本地临时地址预览,提交后再走正式地址
    previewPending(row) {
      const item = this.pendingFiles.find(pending => pending.uid === row.uid)
      if (!item) {
        return
      }
      this.releasePreviewBlob()
      this.previewBlobUrl = URL.createObjectURL(item.raw)
      this.previewRow = { fileName: item.fileName, fileUrl: this.previewBlobUrl }
      this.previewUrl = this.previewBlobUrl
      this.previewVisible = true
    },
    releasePreviewBlob() {
      if (this.previewBlobUrl) {
        URL.revokeObjectURL(this.previewBlobUrl)
        this.previewBlobUrl = ''
      }
    },
    previewFile(row) {
      this.releasePreviewBlob()
      this.previewRow = row
      this.previewUrl = this.fullUrl(row.fileUrl)
      this.previewVisible = true