export function uploadvideo (data) {
  return request({
    url: '/upload/video',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data
  })
}

<template>
  <el-dialog
    title="上傳"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" size="small" label-width="80px">
      <el-form-item label="文件名稱:">
        <el-input v-model="form.contitle" disabled></el-input>
      </el-form-item>
      <el-form-item label="文件上傳:">
        <div class="uppicture">
          <input type="file" class="upinput" ref="file" @change="showimg" />
          <i class="el-icon-plus" id="changes" @click="changeimg"></i>
          <p>上傳合同文件附件</p>
        </div>
        <el-button type="primary" class="uploadbutton" @click="addupload"
          >上傳附件</el-button
        >
      </el-form-item>
    </el-form>
?
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" style="background: #f7f7f7" size="small"
        >取 消</el-button
      >
      <!-- <el-button type="primary" @click="upload">確 定</el-button> -->
    </span>
  </el-dialog>
</template>
?
<script>
import { uploadvideo } from '@/api/entering'
// 遮罩層
import { Loading } from 'element-ui'
export default {
  name: 'DocUpload',
  data () {
    return {
      form: {
        // 合同名稱
        contitle: ''
      },
      formdata: {}
    }
  },
  props: {
    // 顯示隱藏
    dialogVisible: {
      type: Boolean,
      //   必傳
      required: true
    }
  },
  methods: {
    // 關(guān)閉之前
    handleClose () {
      console.log('關(guān)閉之前')
      // .sync語法糖,單向數(shù)據(jù)流問題,
      // 父組件傳遞給子組件的數(shù)據(jù),子組件直接修改會(huì)報(bào)錯(cuò),需要傳遞給父組件修改
      this.$emit('update:dialogVisible', false)
    },
    // 輸入款獲取事件
    showimg () {
      const that = this
      console.log(that.$refs.file)
      console.log(that.$refs.file.files[0])
      // 文件名稱復(fù)制
      that.form.contitle = that.$refs.file.files[0].name
      // 聲明一個(gè)formdata對(duì)象
      this.formdata = new FormData()
      // 賦值需要傳遞的文件
      this.formdata.append('multipartFile', that.$refs.file.files[0])
    },
    // 圖標(biāo)觸發(fā)輸入框事件
    changeimg () {
      // 點(diǎn)擊圖標(biāo)時(shí)候，觸發(fā)input選擇文件按鈕
      this.$refs.file.dispatchEvent(new MouseEvent('click'))
    },
    // 上傳附件
    async addupload () {
      // 上傳文文件提示,未選擇文件提示用戶
      if (!this.form.contitle) {
        return this.$message.warning('請(qǐng)先在左側(cè)上傳文件')
      }
      //開啟遮罩層
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默認(rèn)是false
        text: '正在上傳文件，請(qǐng)耐心等待', //顯示在加載圖標(biāo)下方的加載文案
        spinner: 'el-icon-loading', //自定義加載圖標(biāo)類名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩層顏色
        target: document.querySelector('#futureTransferDialog') //loadin覆蓋的dom元素節(jié)點(diǎn)
      })
      const res = await uploadvideo(this.formdata)
      console.log('文檔服務(wù)器上傳文件', res)
      // 傳遞文件存儲(chǔ)id
      this.$emit('updataurl', res.data.url)
      // 回顯文件名稱給父組件的form表單
      this.$emit('updata', this.form.contitle)
      //  清空表單
      this.form.contitle = ''
      this.formdata = {}
      // 關(guān)閉彈框
      this.handleClose()
      //關(guān)閉遮罩層
      loadingInstance.close()
    }
  }
}
</script>
?
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 9px 9px 0 0;
    background-color: #1488c6;
    padding: 8px 20px;
    .el-dialog__title {
      color: white;
      font-size: 16px;
    }
?
    .el-dialog__headerbtn {
      top: 12px;
      i {
        color: white;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-dialog__body {
    padding: 12px;
  }
  .uppicture {
    width: 120px;
    height: 120px;
    border: 1px solid #717376;
    position: relative;
    cursor: pointer;
    input {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      opacity: 0;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      // background-color: skyblue;
    }
    p {
      position: absolute;
      bottom: -2px;
      left: 50%;
      word-break: keep-all;
      transform: translate(-50%);
    }
    .uploadbutton {
      position: absolute;
      bottom: 0;
      margin-left: 20px;
      position: relative;
    }
    &:hover {
      color: #2da9fa;
      border: 1px solid #2da9fa;
      p {
        color: #2da9fa;
      }
    }
  }
  .uploadbutton {
    position: absolute;
    top: 70%;
    left: 150px;
  }
}
</style>

<DocUpload
      :dialogVisible.sync="dialogannex"
      //  form是父組件表單，上傳成功之后，直接通過子傳父，把url和文件名稱傳遞到父組件表單
      @updata="form.name = $event"
      @updataurl="form.ontractAttachment = $event"
    ></DocUpload>

 // 上傳組件開關(guān)
 dialogannex: false,
 // 表單
 form: {},

addupload () {
      this.dialogannex = true
},