封装上传文件

<template>

  <div class="uploadingVideoClass">

    <div v-if="detail">

      <div v-for="(item,index) in fileList" :key="index" class="videoClass">

        <video alt="example" :src="item.link || item.attachLink || item.filePath" controls></video>

      </div>

    </div>

    <div v-else>

      <div v-for="(item,index) in fileList" :key="index" class="videoClass">

        <video alt="example" :src="item.url" :id="'videoId'+index" controls></video>

        <MyBotton icon="icon-shanchu" placement="top" @click="removeFun(index, item)"> </MyBotton>

      </div>

      <a-upload

        :customRequest="uploadFun"

        list-type="picture-card"

        :file-list="fileList"

        accept="video/*"

        :before-upload="beforeUpload"

        @change="handleChange"

      >

        <div >

          <a-icon type="plus" />

          <div class="ant-upload-text">上传视频</div>

        </div>

      </a-upload>

    </div>

  </div>

</template>

<script>

import { fileNewUpLoad, removeFile } from '@/api/common'

const pathUrl = process.env.VUE_APP_API_BASE_URL + '/spang-safety/file'

export default {

  model: {

    prop: 'fileList',

    event: 'change'

  },

  props: {

    fileType: {

        type: String,

        required: false,

        default: 'img'

      },

    detail: {

      type: Boolean,

      required: false

    },

    fileList: {

      type: Array,

      default: () => { return [] }

    }

  },

  data () {

    return {

      imgSizeNumber: 500,

      previewVisible: false,

      localList: [],

      pathUrl: pathUrl,

      previewSrc: ''

    }

  },

  methods: {

    // 上传

    uploadFun (file) {

      const formData = new FormData()

      formData.append('file', file.file)

      fileNewUpLoad(formData).then(res => {

        if (res) {

          this.localList.push({

            name: file.file.name

          })

          this.fileList.push({

            originalName: res.data.originalName,

            name: res.data.name,

            status: 'done',

            url: res.data.link,

            uid: res.data.attachId,

            attachId: res.data.attachId

          })

          this.$emit('change', this.fileList)

        }

      })

    },

    zanTingFun(index, item) {

      var video = document.getElementById('videoId' + index)

        video.setAttribute('controls', 'controls')

        video.removeAttribute('controls')

        video.play()

        video.pause()

    },

    removeFun(index, file) {

      const findIndex = this.localList.findIndex(item => { return item.originalName === file.name })

      this.localList.splice(findIndex, 1)

      this.fileList.splice(index, 1)

      removeFile(file.attachId).then(res => {

        if (res) {

          this.$message.success('删除成功')

          this.$emit('changeImg', this.fileList)

        }

      })

      this.$emit('change', this.fileList)

    },

    // 上传前校验

    beforeUpload (file) {

      // 限制文件上传类型

      const type = file.type.split('/')[0]

      if (type !== 'video') {

        this.$message.warning('只能上传视频!')

        return false

      }

      let isShow = false

      this.localList.forEach(item => {

        if (item.originalName === file.name) {

          isShow = true

        }

      })

      if (isShow) {

        this.$message.warning('不能重复上传')

        return false

      }

      if (this.fileList.length >= 5) {

        this.$message.warning('最多上传5个视频')

        return false

      }

      const isLt2M = file.size / 1024 / 1024 < this.imgSizeNumber / 1

      if (!isLt2M) {

        this.$message.warning('上传视频大小不能超过' + this.imgSizeNumber + 'M')

      }

      return isLt2M

    }

  }

}

</script>

<style lang="less" scoped>

.videoClass{

  height: 200px;

  width: 360px;

  float: left;

  margin: 0 35px  15px 0;

  position: relative;

  video{

    height: 100%;

    width: 100%;

    background: #dddddc;

    display: block;

  }

}

.pagesBottomClass{

  position: absolute;

  top: -2px;

  right: -32px;

  .maybtnClass{

    background: #fff;

  }

}

.ant-upload-picture-card-wrapper{

  display: inline-block;

  height: 200px;

  width: 360px;

  margin: 0 15px  15px 0;

}

/deep/.ant-upload.ant-upload-select-picture-card{

  height: 200px;

  width: 360px;

}

/deep/.ant-upload-list{

  display: none;

}

</style>