ElementUI pdf的上传、下载、预览

 

 上传

<el-upload
                  v-if="!studyFile"
                  accept=".pdf"
                  :action="$http.adornUrl(`/file/uploadFile`)"//上传照片给服务器，服务器的图片地址
                  :file-list="fileArr"
                  :before-upload="(res)=>beforeStudtUpload(res,1)"//上传前的判断
                  :show-file-list="false"
                  :headers="{ token: $cookie.get('Token') }"//请求头Tonken
                  :on-change="imgPreview"
                  :on-success="StudtUploadSuccess"//上传成功后的回调
                >
                  <div class="results_pdfFile" style="border: 1px dashed #d9d9d9;">
                    <div class="results_pdfFile_upload">
                      <icon-svg name="upload" style="font-size:33px;"></icon-svg>
                      <div class="results_pdfFile_upload_text">上传附件</div>
                      <!-- <span>ssss</span> -->
                    </div>
                  </div>
                </el-upload>

---

  beforeStudtUpload (file, type) {//可以获取上传的大小和类型
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['pdf']
       if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message({
          message: '上传文件只能是 pdf',
          type: 'warning'
        })
        return false
       }
      if (type === 1) {
        if (this.StudtyInfoList.length > 4) {
          console.log(this.StudtyInfoList, '学习上传')
          this.$message({
            message: '学习成绩信息上传文件最多是5个',
            type: 'warning'
          })
          return false
        }
      }
    },

 // 获取文件名、文件名前缀、后缀
    imgPreview (file, type) {
      let array = file.name.split('.')
      let prefix = array[0]
      let suffix = array[1]
      this.ResumefileName.fileName = file.name
      this.ResumefileName.prefix = prefix
      this.ResumefileName.suffix = suffix
      // type存在表示是综合素质信息或者是科研竞赛，根据这个判断显示JPG图片还是Pdf
      // if (type) {
      //   if (suffix === 'pdf') {
      //     this.pdfORjpg = false
      //   } else {
      //     this.pdfORjpg = true
      //   }
      // }
    },

   // 上传成功的回调，返回上传的路径
    StudtUploadSuccess (res) {
      if (this.uploadLoading) {
        this.uploadLoading.close()
        this.$nextTick(() => {
          this.uploadLoading = null
        })
      }
      }
    },

---

下载

@click="downloadFile(item.fileUrl, item.fileName)"

export function downloadFile (url, name) {
  const loding = this.$message({
    message: '文件下载中，请稍后...',
    duration: 0,
    iconClass: 'el-icon-loading'
  })
  const fileNameList = url.split('?')[0].split('/')
  const fileName = name || fileNameList[fileNameList.length - 1]
  let xhr = new XMLHttpRequest()
  xhr.open('GET', '/sx/upload/filePath/' + url, true)
  // 请求头带上token
  xhr.setRequestHeader('token', Vue.cookie.get('token'))
  xhr.responseType = 'blob'
  xhr.onload = e => {
    const a = document.createElement('a')
    a.href = window.URL.createObjectURL(xhr.response)
    a.download = fileName
    a.click()
  }
  xhr.onloadend = e => {
    loding.close()
    this.$message.success('文件下载完成!')
  }
  xhr.send()

  // 打开新页面手动下载
  // const a = document.createElement('a')
  // a.setAttribute('download', '')
  // a.setAttribute('target', '_blank')
  // a.setAttribute('href', url)
  // a.click()
}

---

预览

window.open(this.$http.adornUrl(`/../upload/filePath/${fileUrl}`))