pdf跟图片上传 以及pdf下载 图片放大展示

html展示的部分

<ul class="electronicbox">
       // 多获取的数据循环  对是pdf的样式单独处理
      <li v-for="(item,index) in electronicData" :key="index" :class="!isdown(item)?'pdfstyle':''">
        // 如果是pdf展示文字
        <p v-if="!isdown(item)">pdf</p>
        // 图片的展示方式
        <img :src="baseurl+'/'+item.fileInfo" alt="">
        // 底部的文字展示
        <span>{{ item.fileName }}</span>
        // 鼠标hover 时展示的下载 放大 方法
        <div class="electronicboxhover">
          <i v-if="isdown(item)" class="el-icon-zoom-in" @click="handlePictureCardPreview(baseurl+'/'+item.fileInfo)" />
          <i v-else class="el-icon-download" @click="handlePictureCardDown(item.fileInfo)" />
        </div>
      </li>
    </ul>
// 样式
.electronicbox{
  .pdfstyle{
    p{
      font-size: 24px;
      color: #fff;
      width: 100%;
      position: absolute;
      margin: 0;
    }
    background:rgba(255,94,94, 1);
    text-align: center;
  }
}
.electronicbox li{
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  span{
    position: absolute;
    bottom:-25px;
    left: 0;
    text-align: center;
    width:100%;
    font-size: 14px;
    white-space:nowrap;/* 规定文本是否折行 */
    overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
    text-overflow: ellipsis;
  }
}
.electronicboxhover{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  width: 300px;
  color: #fff;
  height: 90px;
  border-radius: 8px;
  box-shadow: -2px 0 3px -1px #ccc, 0 -2px 3px -1px #ccc, 0 2px 3px -1px #ccc,
  2px 0 3px -1px #ccc; //右边阴影
  cursor: pointer;
  i{
    position:absolute;
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 22px;
    height: 22px;
  }
}
.electronicbox li:hover .electronicboxhover{
  display: block;
}

判断是否是pdf文件

 isdown(item) {
      return item.fileInfo.split('.')[1] !== 'pdf'
    },

先说pdf下载

handlePictureCardDown(file) {
      window.location.href = process.env.VUE_APP_FILEUP_API + '/api/download?fileName=' + file
    },

图片放大弹窗展示

handlePictureCardPreview(file) {
      this.dialogImageUrl = file
      this.dialogVisible = true
    },
    
<el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

上传图片以及pdf的组件

• 如果时候多张上传
• :auto-upload=“false”
• :multiple=“true”
  

<template>
  <div class="staffUpData">
    <el-dialog :close-on-click-modal="false" :visible.sync="isshow" width="800px" @close="closedialog">
      <div class="post-information-title"><span><img src="@/icons/rightArrow.png" alt=""></span>
        资料上传</div>
      <!-- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      show-file-list 是否显示已上传文件列表
      auto-upload 是否在选取文件后立即进行上传
      -->
      <p style="font-size: 12px;color: #ccc;margin-top:20px;">可上传pdf、jpg、png格式，不能超过2M</p>
      <el-upload
        ref="upload"
        :action="baseurl+'/employeeManage/uploadElectronicData'"
        list-type="picture-card"
        :on-remove="handleRemove"
        :on-change="changeUpload"
        :auto-upload="false"
        :show-file-list="true"
        accept="image/png, image/jpeg, application/pdf"
        :data="form"
        :limit="5"
        :on-exceed="limitFn"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
      >
        <i class="el-icon-plus" />
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
      </el-upload>
      <!-- :on-preview="handlePictureCardPreview" -->
      <!-- 确定按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isshow = false">取 消</el-button>
        <el-button type="primary" @click="uploadSumit">确 定</el-button>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-dialog>
  </div>

</template>

<script>

import { uploadElectronicData } from '@/api/staffhmc'
import axios from 'axios'
export default {
  name: 'StaffUpData',
  components: {
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      isshow: false,
      imageUrl: '',
      baseurl: process.env.VUE_APP_BASE_API,
      form: {
        electronicDataList: [],
        employeeId: '',
        dirName: 'public/personnel/userinfo'
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    limitFn() {
      this.$message({
        message: '最多上传5个文件',
        type: 'warning'
      })
    },
    closedialog() {
      this.$refs.upload.clearFiles()
    },
    uploadSumit() { // 上传文件
      uploadElectronicData(this.form).then((res) => {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      }).catch(() => {
        this.$message({
          message: '最多上传5个',
          type: 'error'
        })
      })

      this.isshow = false
    },
    openDialog(employeeId) {
      this.isshow = true
      this.form.employeeId = employeeId
      // employeeId && this.editEmployeeStatusDetail()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList, '1')
    },
    // 上传之前
    beforeAvatarUpload(file) {

    },
    // 上传成功
    handleAvatarSuccess() {

    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    changeUpload(file, fileList) {
      const isJPG = file.raw.type === 'image/jpeg'
      const isPng = file.raw.type === 'image/png'
      const isPdf = file.raw.type === 'application/pdf'
      const isLt2M = file.raw.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
      }
      if (!isJPG && !isPng && !isPdf) {
        this.$message.error('只能上传 JPG/PNG/PDF 格式!')
      }
      this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((item) => {
        return item.raw.size / 1024 / 1024 < 2
      })
      this.tobase64(fileList) // 也可以传  file   file.raw === fileList[i].raw
    },
    // 对文件的处理
    tobase64(fileList) {
      this.form.electronicDataList = []
      for (let i = 0; i < fileList.length; i++) {
        var reader = new FileReader()
        // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
        reader.readAsDataURL(fileList[i].raw)
        // 当 FileReader 读取文件的方式为  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候，会触发一个 load 事件。从而可以使用  FileReader.onload 属性对该事件进行处理。
        reader.onload = (e) => {
          const tempobj = {
            data: e.target.result.split(',')[1], // 上传图片的内容
            suffix: '.' + fileList[i].raw.type.split('/')[1], // 后缀
            fileName: fileList[i].name // 名字
          }
          this.form.electronicDataList.push(tempobj)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.post-information-title{
  font-size: 15px;
  margin: -35px 10px 10px 10px ;
  color: dodgerblue;
  span{
    display: inline-block;
    width: 11px;
    height: 100%;
    img{
      width: 100%;
    }
  }
}
</style>

<style lang="scss">
// 这个样式是处理 文字显示以及pdf单独加样式的
.staffUpData .el-upload-list--picture-card .el-upload-list__item{
  overflow: inherit;
  float: left;
  background:rgba(255,94,94,1); // 红色
  margin-top:20px;
  img{
    display: block;
  }
}
.staffUpData .el-upload-list--picture-card .el-upload-list__item-name{
  display:block;
  width:100%;
}
.staffUpData .el-upload--picture-card{
  margin-top:20px;
}
</style>