2021-7-30 重写上传

88

记录一下重新写的上传视频和config.json

<template>
  <div>
    <a-modal v-model:visible="modalVisible" title="上传Graph测试数据" :footer="null">
      <div class="graph-modal-form-item">
        <div class="graph-modal-form-item-label">待测Graph：</div>
        {{ record.name }}
      </div>
      <div class="graph-modal-form-item">
        <div class="graph-modal-form-item-label">
          上传测试视频：
        </div>
        <a-spin :spinning="uploading">
          <a-upload
            class="graph-modal-form-item-uploader"
            :before-upload="() => false"
            @change="fileAdded"
            :accept="accept"
            :showUploadList="false"
          >
            <slot>
              <div class="upload-trigger">
                <UploadOutlined style="font-size: 40px;" />
                <div>只允许上传一个{{ accept }}文件</div>
              </div>
            </slot>
          </a-upload>
        </a-spin>
        <!-- <span v-if="permission"
          >{{ fileList[0].name
          }}<DeleteOutlined
            class="graph-modal-form-item-input-action"
            style="margin-left:5px"
            @click="deleteFile"
        /></span> -->
      </div>
      <!-- <template #footer>
        <a-button @click="sendFile" type="primary">测试视频</a-button>
      </template> -->
    </a-modal>
    <a-modal v-model:visible="success" title="上传成功"
      ><div style="display:flex;justify-content:center">
        <CheckCircleTwoTone
          :style="{ fontSize: '80px' }"
          twoToneColor="#52c41a"
        />
      </div>
      <div style="display:flex;justify-content:center;margin-top:15px">
        正在测试模型，测试过程需要一段时间，完成后将邮件告知您
      </div>
      <template #footer>
        <a-button @click="success = false" type="primary">确定</a-button>
      </template></a-modal
    >
  </div>
</template>
<script>
import {
  UploadOutlined,
  // DeleteOutlined,
  CheckCircleTwoTone
} from '@ant-design/icons-vue'
const allowExtentions = ['.mp4']
export default {
  data () {
    return {
      success: false,
      modalVisible: false,
      record: {},
      file: {},
      // permission: false,
      uploading: false,
      accept: allowExtentions[0]
    }
  },
  components: {
    UploadOutlined,
    // DeleteOutlined,
    CheckCircleTwoTone
  },
  // watch: {
  //   fileList (list) {
  //     this.dealWithFileList(list)
  //   }
  // },
  methods: {
    // deleteFile () {
    //   this.fileList = []
    //   this.permission = false
    // },
    dealWithFile (file) {
      // if (this.fileList.length) {
      const pos = file.name.lastIndexOf('.')
      const extention = file.name.substring(
        pos === -1 ? file.name.length : pos,
        file.name.length
      )
      if (allowExtentions.includes(extention)) {
        // this.permission = true
        this.sendFile()
      } else {
        this.uploading = false
        this.file = {}
        this.$message.error('文件格式错误')
      }
      // }
    },
    open (record) {
      this.modalVisible = true
      this.record = record
      this.file = {}
      this.uploading = false
      // this.permission = false
      console.log('openrecord', record)
    },
    fileAdded (e) {
      this.uploading = true
      console.log(e)
      this.file = e.file
      this.dealWithFile(this.file)
    },
    sendFile () {
      // if (this.permission) {
      const file = this.file
      const data = new FormData()
      data.append('name', file.name)
      data.append('file', file)
      // this.uploading = false
      // this.modalVisible = false
      // this.success = true
      // uploadVideo()
      //   .then(res => {
      //     this.uploading = false
      //     this.modalVisible = false
      //     this.success = true
      //   })
      //   .catch(error => {
      //     console.log(error)
      //     this.$message.error(error.message)
      //   })
      // } else {
      //   this.$message.error('请上传正确格式的视频文件')
      // }
    }
  }
}
</script>

<style scoped></style>

<template>
  <a-modal
    v-model:visible="modalVisible"
    title="上传Graph配置文件"
    :footer="null"
    width="350px"
  >
    <div style="display:flex;justify-content:center">
      <a-spin :spinning="uploading">
        <!-- <a-upload
          v-if="!permission"
          class="graph-modal-form-item-uploader"
          :before-upload="() => false"
          v-model:file-list="uploadFileList"
          @change="fileAdded"
        > -->
        <a-upload
          class="graph-modal-form-item-uploader"
          :before-upload="() => false"
          @change="fileAdded"
          :accept="accept"
          :showUploadList="false"
        >
          <slot>
            <div class="upload-trigger">
              <UploadOutlined style="font-size: 40px;" />
              <div>只允许上传一个{{ accept }}文件</div>
            </div>
          </slot>
        </a-upload>
      </a-spin>
      <!-- <span v-if="permission">{{ fileList[0].name }}</span> -->
    </div>
    <!-- <template #footer>
      <a-button @click="sendFile" type="primary">确定</a-button>
    </template> -->
  </a-modal>
</template>
<script>
import { UploadOutlined } from '@ant-design/icons-vue'
const allowExtentions = ['.json']
export default {
  data () {
    return {
      modalVisible: false,
      // record: {},
      file: {},
      // permission: false,
      uploading: false,
      accept: allowExtentions[0]
    }
  },
  components: {
    UploadOutlined
  },
  methods: {
    dealWithFile (file) {
      // console.log('file', file)
      // if (this.fileList.length === 1) {
      const pos = file.name.lastIndexOf('.')
      const extention = file.name.substring(
        pos === -1 ? file.name.length : pos,
        file.name.length
      )
      if (allowExtentions.includes(extention)) {
        // this.permission = true
        this.sendFile()
      } else {
        this.file = {}
        this.uploading = false
        this.$message.error('文件格式错误')
      }
      // }
    },
    open () {
      this.modalVisible = true
      this.file = {}
      // this.permission = false
      this.uploading = false
    },
    fileAdded (e) {
      this.uploading = true
      console.log(e)
      this.file = e.file
      this.dealWithFile(this.file)
    },
    sendFile () {
      // if (this.permission) {
      const data = new FormData()
      const file = this.file
      data.append('name', file.name)
      data.append('file', file)
      // uploadConfig()
      //   .then(res => {
      // this.uploading = false
      //     this.modalVisible = false
      //     this.$emit('close', res)
      //   })
      //   .catch(error => {
      //     this.$message.error(error.message)
      //   })
      // this.uploading = false
      // this.modalVisible = false
      // this.$emit('close', res)
      // } else {
      //   this.$message.error('文件有误，请重新上传')
      // }
    }
  }
}
</script>

<style scoped></style>