后台管理系统文件三部曲之——第三部曲实现文件的查看预览

文件预览：

    <el-dialog
      :visible.sync="imgDialog "
      :close-on-click-modal="false"
      :before-close="closeImg"
      append-to-body
      width="1100px"
    >
      <div slot="title" class="dialog-title-cls">
        <el-divider />
      </div>
    <div class="block" height="500px">
        <el-image :src="fileSrc" height="500px" />
      </div>
    </el-dialog>

实现：

  view(id, name) {
      const fileName = name
      if (id) {
        getDownUrl(id)
          .then((res) => {
            const link = document.createElement('a')
            const blob = new Blob([res])
            if (
              fileName.indexOf('jpg') !== -1 ||
              fileName.indexOf('png') !== -1 ||
              fileName.indexOf('jepg') !== -1
            ) {
              // blob转换成url
              this.previewDialog = true
              this.previewUrl = URL.createObjectURL(blob)
              return
            }
            var reader = new FileReader()
            reader.readAsText(blob, 'utf-8')
            reader.onload = () => {
              if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob)
              } else {
                link.style.display = 'none'
                link.href = URL.createObjectURL(blob)
                // blob文件对象
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
              }
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } else {
        this.$message({
          type: 'error',
          message: '请传文件路径!'
        })
      }
    },

这是之前技术中台未改之前，的查看和下载写的方法基本一致。

当技术中台修改之后，传入流的时候代码又发生了改变：

    view(item) {this.imgDialog = true
      debugger
      if (item) {
        this.imgDialog = true
        this.fileSrc =
        process.env.VUE_APP_FILE_API +
        '/obj/storage/download?objectId=' +
        item
      } else {
        this.$message({
          type: 'error',
          message: '请传文件路径!'
        })
      }
    },

直接拿着文件的路径链接进行预览查看。

之前的下载预览方法是getDownUrl  现在如果是图片的话要改为getObjectUrl

最后再view显示的时候，如果是图片的话用img便签显示，如果是pdf的话，用emba标签进行显示。