上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/led/led-controller/video-upload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@
<template>
  <div style="padding: 20px">
    <el-row>
      <el-col :span="18">
        <div>
          <el-upload
            class="upload-demo"
            drag
            :action="videoUrl"
            ref="videoUpload"
            accept=".mp4"
            :auto-upload="false"
            :limit="1"
            :file-list="videoFileList"
            :data="submitData"
            :on-success="successHandle">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传mp4文件，且不超过10MB</div>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <button class="btn" @click="videoSubmitUpload"></button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      videoUrl: '',
      videoFileList: [],
      submitData: {
        lightemitId: ''
      }
    }
  },
  computed: {
    lightemitStateId () {
      return this.$store.state.led.lightemitId
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    lightemitStateId (curVal, oldVal) {
      this.submitData.lightemitId = curVal
    }
  },
  methods: {
    init () {
      this.videoFileList = []
      this.submitData.lightemitId = this.$store.state.led.lightemitId
      this.videoUrl = this.$http.adornUrl(`/pole/polelightemit/videoUpload?token=${this.$cookie.get('token')}`)
    },
    onChangePhoto (file, fileList) {
      this.photoFileList = fileList
    },
    videoSubmitUpload () {
      this.$refs.videoUpload.submit()
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸå›žè°ƒå‡½æ•°
    successHandle (response, file, fileList) {
      if (response && response.code === 0) {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.videoFileList = []
            // this.visible = false
            // this.$emit('refreshDataList')
          }
        })
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  border-style: none;
  width: 100px;
  height: 35px;
  background: url(~@/assets/img/btn-config.png);
  background-repeat:no-repeat;
  border-style: none;
  background-size: 100%;
  color: #fff;
  font-size: 1.4em;
  font-weight: 550;
};
</style>