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>
posted @ 2022-07-22 14:01  诡道也  阅读(369)  评论(0编辑  收藏  举报