Merge branch 'feature_1.0'

quanyawei

2023-10-07 9083fd270cd172f998eb2dd3dfae59187a70cb1a

 src/components/UploadExcel/index.vue

New file
@@ -0,0 +1,253 @@
<template>
  <div>
    <el-upload
      :limit="limit"
      :action="uploadUrl"
      accept="image/*,video/*"
      :data="{sysCode}"
      :file-list="UrlList"
      :headers="{ token: token }"
      list-type="picture-card"
      :before-upload="before_upload"
      :on-change="handleImgChange"
      :on-success="handleUploadSuccess"
    >
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{ file }">
        <img
          v-if="file.type == 1"
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        >
        <video v-if="file.type == 2" :src="file.url" style="width: 100%">
          您的浏览器不支持 video 标签。
        </video>
        <audio
          v-if="file.type == 3"
          controls
          :src="file.url"
          style="width: 100%"
        >
          您的浏览器不支持该音频格式。
        </audio>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in" />
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleImgRemove(file)"
          >
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" width="600px" append-to-body :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
      <div style="text-align: center;">
        <img
          v-if="dialogType == 1"
          class="el-upload-list__item-thumbnail"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          alt=""
        >
        <video
          v-if="dialogType == 2"
          ref="video"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import bus from '@/Bus'
export default {
  name: 'UploadExcel',
  props: {
    uploadUrl: {
      type: String,
      required: true
    },
    sysCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      token: getToken(),
      limit: 9, // 限制上传数量
      dialogImageUrl: null,
      dialogVisible: false,
      UrlList: [],
      disabled: false,
      dialogType: null,
      fileBaseList: [],
      fileChangeList: []
    }
  },

  methods: {
    handleCancel(e) {
      this.dialogVisible = false

      setTimeout(() => {
        if (this.$refs.video) {
          this.$refs.video.pause()
        }

        this.dialogImageUrl = ''
      }, 200)
    },
    // 上传前
    before_upload(file) {
      const fileSize = file.size
      const FIVE_M = 100 * 1024 * 1024
      // 不允许上传大于2M
      if (fileSize > FIVE_M) {
        this.$message.error('最大上传1002M')
        return false
      }
      const name = file.name.substring(file.name.lastIndexOf('.') + 1)
      const nameList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe', 'mp4', 'm2v', 'mkv']
      if (!nameList.includes(name)) {
        this.$message.error('只能上传图片和视频！')
        return false
      }
      return true
    },

    handlePictureCardPreview(file) {
      console.log('file', file)
      // const baseUrl = `${requestObj.baseUrl}/static/img/`
      this.dialogImageUrl = file.url
      console.log('this.dialogImageUrl', file)
      this.dialogType = file.type
      this.dialogVisible = true
    },
    // 图片改变
    handleImgChange(file, fileList) {
      bus.$emit('changeFileAfterList', 'change', fileList)

      this.UrlList = fileList
    },
    // 图片移除
    handleImgRemove(file, fileList) {
      fileList = this.UrlList
      const index = fileList.indexOf(file)
      fileList.splice(index, 1)
      bus.$emit('changeFileAfterList', 'detail', fileList)
    },
    // 图片上传成功
    handleUploadSuccess(response, file, fileList) {
      console.log(file)
      this.UrlList.push({
        url: file.url
      })
      bus.$emit('changeFileAfterList', 'success', fileList)
      file.type = this.matchType(file.response.data.fileName)
    },

    // 根据文件名后缀区分 文件类型
    /*
     * @param: fileName - 文件名称
     * @param: 数据返回 1) 无后缀匹配 - false
     * @param: 数据返回 2) 匹配图片 - image
     * @param: 数据返回 8) 匹配 视频 - video
     * @param: 数据返回 9) 匹配 音频 - radio
     * @param: 数据返回 10) 其他匹配项 - other
     */
    matchType(fileName) {
      // 后缀获取
      var suffix = ''
      // 获取类型结果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false
        return result
      }
      // 图片格式
      var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe']
      // 进行图片匹配
      result = imglist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = '1'
        return result
      }
      // 匹配 视频
      var videolist = ['mp4', 'm2v', 'mkv']
      result = videolist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = '2'
        return result
      }
      // 匹配 音频
      var radiolist = ['mp3', 'wav', 'wmv', 'flac']
      result = radiolist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = '3'
        return result
      }
      // 其他 文件类型
      result = 'other'
      return result
    }

  }
}
</script>
<style lang="scss" scope>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  max-height: 148px;
  display: block;
}
.avatar-video {
  width: 200px;
  max-height: 200px;
  display: block;
}
</style>