upload 上传图片和 video

<template>

  <div class="comp-items">

    <el-tabs v-model="typeVal" @tab-click="tabclick" class="my-tabs">

      <el-tab-pane v-for="item in tabsType" :key="item.value" :name="item.value" :label="item.label">

        <div class="pane-wrapper">

          <div class="pane-content">

            <el-upload

              :ref="'myUpload'+item.value"

              :action="'/apis/hmfsMedia/v2/'+(item.value === '1' ? 'image' : 'video')+'/upload'"

              :accept="item.value === '1' ? 'image/*' : 'video/mp4'"

              :data="{

                areaLayer: areaLayer,

                sourceType: 3,

                description: '后台图片视频异常库',

              }"

              list-type="picture-card"

              :file-list="item.value === '1' ? imageException : videoException"

              :on-success="imgUplandimg"

              :on-change="handleImgChange"

              :on-preview="handleImgPreview"

              :name="item.value === '1' ? 'image' : 'video'"

              :auto-upload="true"

              :before-upload="item.value === '1' ? handleImageBefore : handleVideoBefore"

            >

              <!-- <div slot="file" slot-scope="{file}">

                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">

                <span class="el-upload-list__item-actions">

                  <span

                    class="el-upload-list__item-preview"

                    @click="handleImgPreview(file)"

                  >

                    <i class="el-icon-zoom-in"></i>

                  </span>

                </span>

              </div> -->

              <i class="el-icon-plus"></i>

            </el-upload>

          </div>

        </div>

      </el-tab-pane>

    </el-tabs>

    <el-dialog :visible.sync="uploadImgVisible" :append-to-body="true">

      <img width="100%" :src="uploadImgUrl" style="max-height: 65vh;" alt="" />

    </el-dialog>

    <el-dialog :visible.sync="uploadVideoVisible" :destroy-on-close="true" :append-to-body="true">

      <video width="100%" :src="uploadVideoUrl"  :autoplay='false' style="max-height: 65vh;" controls alt="" />

    </el-dialog>

  </div>

</template>

<script>

export default {

  props: {

    itemType: {

      type: Object

    }

  },

  data() {

    return {

      areaLayer: this.$store.state.areaLayer,

      SSOID: this.$store.state.cookie,

      typeVal: "1",

      tabsType: [{

        value: "1",

        label: "图片"

      },{

        value: "2",

        label: "视频"

      }],

      uploadImgVisible: false,

      uploadImgUrl: "",

      uploadVideoVisible: false,

      uploadVideoUrl: "",

      imageException: [],

      videoException: []

    }

  },

  methods: {

    handleImgPreview(file) {

      if(file.response && file.name.indexOf("mp4") > -1) {

        this.uploadVideoUrl = file.response.result.url;

        this.uploadVideoVisible = true;

        return

      }

      if(file.video) {

        this.uploadVideoUrl = file.video;

        this.uploadVideoVisible = true;

        return

      }

      this.uploadImgUrl = file.url;

      this.uploadImgVisible = true;

    },

    imgUplandimg(res) {

      if(res.success) {

        this._uploadVideoException(res.result.url, res.result.frameUrl)

      }

    },

    handleImgChange(file) {

      if(this.typeVal === "2") {

        if(file.response && file.response.success) {

          file.url = file.response.result.frameUrl

        }

      }

    },

    handleImageBefore(file) {

      if(file.type.indexOf("png") < 0 && file.type.indexOf("jpg") < 0 && file.type.indexOf("jpeg") < 0) {

        this.$message.error("请上传png、jpg、jpeg格式的图片！！")

        return false

      }

    },

    handleVideoBefore(file) {

      if(file.type.indexOf("mp4") < 0) {

        this.$message.error("请上传mp4格式的视频！！")

        return false

      }

    },

    tabclick(v) {

      this._getListException()

    },

    _uploadVideoException(url, frameUrl) {

      let params = {

        areaLayer: this.areaLayer,

        SSOID: this.SSOID,

        typeName: this.itemType.label,

        type: this.itemType.value,

        url: url

      }

      if(this.typeVal === "2") {

        params.firstUrl = frameUrl

      }

      this.$axios.post("/apis/hmcsMonitor/v2/"+ (this.typeVal === "1" ? "imageException" : "videoException") +"/add", params).then(res => {

        if(res.data.success) {

          this.$message({

            message: '上传成功',

            type: 'success'

          });

        }

      })

    },

    _getListException(type) {

      let params = {

        areaLayer: this.areaLayer,

        SSOID: this.SSOID,

        pageNo: 1,

        pageSize: 9999,

        typeName: this.itemType.label,

        type: this.itemType.value

      }

      let currtype = type ? type : this.typeVal

      let objname = currtype === "1" ? "imageException" : "videoException"

      if(this[objname].length) {

        return

      }

      this.$axios.get("/apis/hmcsMonitor/v2/"+(currtype === "1" ? "imageException" : "videoException")+"/listForPage", {params: params}).then(res => {

        if(res.data.success) {

          this[objname] = res.data.result.list.map(item => {

            return {

              name: item.id,

              url: currtype === "1" ? item.url : item.firstUrl,

              video: currtype === "1" ? null : item.url

            }

          })

        }

      })

    }

  }

}

</script>

<style lang="scss" scoped>

.my-tabs {

  border-top: 1px solid #E4E7ED;

}

.pane-wrapper {

  padding: 0 0 15px;

}

.pane-content {

  position: relative;

  min-height: 148px;

  max-height: 468px;

  padding: 0 50px;

  font-size: 0;

  overflow: auto;

}

</style>

<style>

.my-tabs .el-tabs__nav-wrap {

  padding: 0 15px;

}

.my-tabs .el-upload-list--picture-card .el-upload-list__item:first-child {

  margin-left: 156px;

}

.my-tabs .el-upload-list__item-delete {

  display: none !important;

}

.my-tabs .el-upload--picture-card {

  position: absolute;

  left: 50px;

  top: 0;

}

</style>