el-upload二次封装 解决picture-card上传时非图片文件出现图裂,采用其他格式图片代替

//注意:由于element对上传处理有动画 所以处理后会有抖动出现 可以去掉element的上传动画 效果会好很多 
/*去除upload组件过渡效果 .el-upload-list__item { transition: none !important; }*/

<vms-upload v-model="saveForm.fileList"  //绑定的文件列表 需要与返回的文件列表一致不一致请处理下上传的文件
            :file-type="['jpg', 'png', 'pdf', 'xlsx', 'xls', 'docx', 'doc']"  //允许上传的文件格式可以自定义
             :is-disabled="type === 'check' ? true : false"  //查看预览隐藏上传按钮
          />

//1.采用httprequest上传的 使用action自动上传也可以参考使用
<template>
  <div>
    <el-upload
      :class="{hide:isDisabled}"
      :file-list="fileList"
      action=""
      :limit="limit"
      :disabled="isDisabled"
      :http-request="fileRequest"
      list-type="picture-card"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-image-viewer
      v-if="imgView"
      :url-list="urlList"
      :initial-index="initialIndex"
      :on-close="() => { imgView = false }"
      :style="{ 'zIndex': 9999 }"
    />
  </div>
</template>

<script>
import axios from 'axios'
import { Message } from 'element-ui'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer' //element自带图片预览组件

export default {
  components: {
    ElImageViewer
  },

  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    },

    fileType: {
      type: Array,
      default () {
        return []
      }
    },
    limit: {
      type: Number,
      default: 10
    }

  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      fileSuccess: [],
      imageUrl: '',
      imgView: false,
      urlList: [],
      initialIndex: 0
    }
  },
  watch: {
    value: { //组件传过来的数据显示要处理下
      handler (val) {
        if (Array.isArray(val) && val.length) {
          this.fileSuccess = val.map((item) => {
            return {
              url: item.imageUrl,
              imageUrl: item.imageUrl,
              name: item.name
            }
          })
          this.fileListFun()
        } else {
          this.fileSuccess = []
          this.fileList = []
        }
      },
      deep: true,
      immediate: true
    },
    fileList: {
      handler (val) {
        this.$emit('fileChange', val)
      }
    }
  },
  methods: {
    beforeAvatarUpload (file) {
      if (this.fileType.length && !this.fileType.includes(file.name.match(/\.[^.]+$/g)[0].replace(/\./g, ''))) {
        Message({
          message: `允许上传的格式: ${this.fileType.join(' | ')}`,
          type: 'warning'
        })
        return false
      }
    },
    fileRequest (item) {  //文件上传接口
      const uploadData = new FormData()
      uploadData.append('file', item.file)
      item.status = 'uploading'
      item.message = '上传中...'
      axios.post('/admin/common/commonPic/uploadFile', uploadData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => {
        if (res.data.code === 200 && res.data.data) {
          this.fileSuccess.push(res.data.data)
          this.$emit('input', this.fileSuccess)
          this.fileListFun()
        } else {
          Message.error('文件上传错误')
        }
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err)
        Message.error('文件上传错误')
      })
    },
    fileListFun () {  //不同文件显示处理方法
      // if (!fileSuccess) { return false }
      this.fileList = []

      this.fileList = this.fileSuccess.map((item, index) => {
        if (/.pdf$/.test(item.imageUrl)) {
          item = {
            url: require('@/assets/vms/img/pdf.svg'),
            showUrl: item.showUrl,
            imageUrl: item.imageUrl
          }
        } else if (/.xlsx$/.test(item.imageUrl)) {
          item = {
            url: require('@/assets/vms/img/xlsx.svg'),
            showUrl: item.showUrl,
            imageUrl: item.imageUrl
          }
        } else if (/.doc$/.test(item.imageUrl) || /.docx$/.test(item.imageUrl)) {
          // console.log(item)
          item = {
            url: require('@/assets/vms/img/doc.svg'),
            showUrl: item.showUrl,
            imageUrl: item.imageUrl
          }
        } else if (/.zip$/.test(item.imageUrl) || /.rar$/.test(item.imageUrl)) {
          item = {

            url: require('@/assets/vms/img/zip.svg'),
            showUrl: item.showUrl,
            imageUrl: item.imageUrl
          }
        } else if (/(.jpg|.png|.jpeg)$/.test(item.imageUrl)) {
          item = {
            url: item.imageUrl,
            imageUrl: item.imageUrl
          }
        } else {
          item = {
            url: item.url,
            imageUrl: item.url
          }
        }
        // console.log(item)
        return item
      })
    },
    handleAvatarSuccess () {

    },
    handleRemove (file, fileList) {  //移除
      const findIndex = this.fileSuccess.findIndex((item) => {
        return item.url === file.imageUrl
      })
      this.fileSuccess.splice(findIndex, 1)
      this.fileListFun()
      this.$emit('input', this.fileSuccess)
    },
    handlePreview (file) { //预览方法
      if (!/(.jpg|.png|.jpeg|.webp|.svg)$/.test(file.imageUrl)) {
        if (/.pdf$/.test(file.imageUrl)) { //pdf预览 //其他文件是下载
          window.open(file.imageUrl, '_blank')
        } else {
          window.open(file.imageUrl)
        }
      } else { //图片预览
        this.imgView = true
		//当有图片和其他文件一起上传的时候过滤掉非图片的预览
        this.urlList = this.fileList.filter((item) => {
          if (/(.jpg|.png|.jpeg|.webp|.svg)$/.test(item.imageUrl)) {
            return item
          }
        }).map((item) => {
          return item.imageUrl
        })
	//点击某一个图片预览当前图片
        this.initialIndex = this.urlList.findIndex((item) => {
          return item === file.imageUrl
        })
      }
    }
  }
}
</script>
<style lang="scss">

/* 隐藏上传按钮 */
.hide .el-upload--picture-card {
    display: none;

}

</style>