pdf.js实现pdf预览和下载系列2

2021年12月09日 15:41

需求：想在上传的时候预览一下pdf,而不是上传完成后预览，emmmmm,好吧既然提出来了，那就想想怎么实现

思路：上传文件的时候拦截==>获取文件==>进行展示==>提交，说干就干！！！

xxx,js

// 文件上传  file
export function uploadCheckReport(params) {
  return request({
    url: '/api/xxx/xxx',
    method: 'post',
    data: params,
    headers: { 'Content-Type': 'multipart/form-data; charset=utf-8' },
  })
}
复制代码

xxx.vue

<el-upload
    drag
    multiple
    :auto-upload="true"
    :file-list="report.fileList"
    action="#"
    style="display: flex; justify-content: center; align-items: center; flex-direction: column"
    :before-upload="beforeUpload"
    :on-remove="onRemove"
>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">可上传img/pdf文件</div>
</el-upload>
<div v-if="report.fileData" style="display: flex; justify-content: center; align-items: center; padding: 20px 0">
    <el-button type="primary" @click="viewFile">预览</el-button>
    <el-button v-loading.fullscreen.lock="fullscreenLoading" style="margin-left: 10px" type="primary" @click="submitUpload">提交</el-button>
</div>
//使用这里可以在页面中某个地方预览pdf
//<object :data="fileData" type="application/pdf" width="100%" height="100%" internalinstanceid="5"></object>

import { uploadCheckReport} from '@/api/xxx.js'
export default {
  name: 'xxx',
  data() {
      report: {
        fileData: '',
        file: '',
        fileName: '',
        fileSize: '',
        fileList: [],
      },
      fullscreenLoading:false,
  },
  methods:{
      //1.上次之前拦截文件
      beforeUpload(file) {
          this.report.file = file
          this.report.fileName = file.name
          this.report.fileSize = file.size
          let reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => {
              this.report.fileData = reader.result
              this.report.fileList = [
                  {
                      name: file.name,
                      url: reader.result,
                  },
              ]
          }
          return false // 返回false不会自动上传
      },
      //移除文件列表，清除点击预览时的文件
      onRemove() {
          this.report.fileData = ''
      },
          // 预览文件
      viewFile() {
          let win = window.open()
          win.document.write(
            '<body style="margin:0px;"><object data="' +
              this.report.fileData +
              '" type="application/pdf" width="100%" height="100%"><iframe src="' +
              this.report.fileData +
              '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>',
          )
      },
      // 提交上传的文件
      submitUpload() {
          this.fullscreenLoading = true
          const flieType = this.report.fileName.split('.')[1].toString()
          if (['pdf', 'png', 'jpg', 'webp'].includes(flieType)) {
            let fileFormData = new FormData()
            fileFormData.append('file', this.report.file)
            fileFormData.append('taskId', this.uploadTaskId)
            uploadCheckReport(fileFormData)
              .then((res) => {
                this.fullscreenLoading = false
                this.upload.dialogVisible = false
                this.$message({ type: 'success', message: '上传成功' })
              })
              .catch((err) => {
                this.upload.dialogVisible = false
              })
          } else {
            this.$notify.warning({ title: '上传失败', message: '只能上传图片格式和.pdf文件' })
          }
      },    
  }
}
复制代码