基于el-upload的文件上传及预览的组件

<template>
  <div>
    <el-upload
      v-if="diableUpload===false"
      ref="upload"
      :action="uploadUrl"
      :on-success="handleAvatarSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :file-list="fileList"
      accept=".jpg,.jpeg,.png,.gif,.pdf,.JPG,.JPEG,.PNG,.GIF,.PDF"
      :headers="uploadHeader"
      list-type="picture-card"
      :auto-upload="true">
      <i class="el-icon-plus"></i>
      <div slot="file" style="height: 100%;width: 100%" slot-scope="{file}">
        <el-image
          width="100%"
          height="100%"
          class="el-upload-list__item-thumbnail"
          @click="handlePictureCardPreview(file)"
          :src="file.url" alt="">
          <div slot="error" class="image-slot" @click="showIframeDialog(file)">
            <img src="https://yuyu888.github.io/posts/2021/03/01/pdf-icon.jpeg" width="145" height="145"></img>
          </div>
        </el-image>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            class="el-upload-list__item-delete"
            @click="handleRemoveCustom(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-image
      v-if="diableUpload===true"
      style="width: 145px;height: 145px;cursor:pointer;margin-right: 10px;margin-top: 10px;"
      @click="handlePictureCardPreview(item)"
      v-for="(item, i) in fileList"
      :key="i"
      :src="item.url" alt="">
      <div slot="error" class="image-slot" @click="showIframeDialog(item)">
        <img src="https://yuyu888.github.io/posts/2021/03/01/pdf-icon.jpeg" width="145" height="145"></img>
      </div>
    </el-image>

    <el-dialog :visible.sync="dialogVisible" width="80%" >
      <iframe :src="dialogImageUrl" v-if="showIframe" frameborder="0" style="width: 100%; height:700px;"></iframe>
      <img width="100%" @error="showIframe=true;" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
    import Vue from 'vue'

export default {
      name: 'application-upload',
      props: {
        diableUpload: {
          type: Boolean,
          default: false
        },
        fileList: {
          type: Array,
          default: []
        }
      },
      computed: {
        uploadHeader () {
          return {
            token: Vue.cookie.get('token')
          }
        }
      },
      data () {
        return {
          uploadUrl: this.$http.adornUrl('/hr/attendance/portal/my/application/upload'),
          dialogImageUrl: '',
          dialogVisible: false,
          // fileList: [],
          showIframe: false,
          imageList: []
        }
      },
      methods: {
        handleRemoveCustom (file) {
          this.$refs.upload.handleRemove(file)
      // let fileList = this.$refs.upload.uploadFiles
      // let index = fileList.findIndex(fileItem => { return fileItem.uid === file.uid })
      // fileList.splice(index, 1)
      // this.imageList = this.foramtFileList(fileList)
      // this.handleImageChange()
        },
        handleRemove (file, fileList) {
          console.log(fileList)
          console.log(6666)

          this.imageList = this.foramtFileList(fileList)
          this.handleImageChange()
        },
        handlePictureCardPreview (file) {
          this.showIframe = false
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        },
        showIframeDialog (file) {
          console.log(2222)
          this.showIframe = true
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        },
        foramtFileList (fileList) {
          console.log(fileList)
          let imageFileList = []
          for (const item of fileList) {
            if (item.path !== undefined) {
              imageFileList.push(item.path)
            } else {
              if (item.response.code === 0) {
                imageFileList.push(item.response.info.img_path)
              }
            }
          }
          return imageFileList
        },
        handleAvatarSuccess (res, file, fileList) {
          this.imageList = this.foramtFileList(fileList)
          this.handleImageChange()
        },
        handleImageChange () {
          this.$emit('handleImageChange', this.imageList)
        }

      }
    }
</script>

<style scoped>

</style>

 <application-upload :fileList="fileList"  :diableUpload="applyFormDisabled" @handleImageChange="handleImageChange" ></application-upload>

[{"path":"application/1640240940910181089.pdf","url":"http://10.130.130.232:9001/hr-attendance/application/1640240940910181089.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin_finance%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T093029Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=c45bbd2abf2e64155086b82dadbdbd05f9909c10e4f1bcd1b52bf5ed2ec5579b"},{"path":"application/1640249582821880939.jpg","url":"http://10.130.130.232:9001/hr-attendance/application/1640249582821880939.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin_finance%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T093029Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=34d2551ccda4da2bb93fa5912aadadd9528d8f88add2a657ef42c91b04c61148"},{"path":"application/1640249688030440802.jpg","url":"http://10.130.130.232:9001/hr-attendance/application/1640249688030440802.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin_finance%2F20211223%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211223T093029Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cff66c6fc49dc52612564f4206bb8b1524948808b4df59438f692109b829ef29"}]