2021-7-28 上传

86

突然想到上传的逻辑

<template>
  <a-upload class="graph-modal-form-item-uploader" :before-upload="() => (false)" @change="fileAdded" :showUploadList="false" :accept="accept">
    <slot>
      <div class="upload-trigger">
        <UploadOutlined style="font-size: 40px;" />
        <div>只允许上传{{accept}}格式文件</div>
      </div>
      <div @click.stop v-if="info" class="graph-modal-form-item-tips" style="position: absolute; bottom: -20px; left: 0; color: #666;">{{info}}</div>
    </slot>
    <div @click.stop  style="margin-top: 4px;" v-if="nodes.node_filename && !$slots.default">
      <a-tag v-for="node in nodes.parse_result" :key="node.node_name">{{node.node_name}}</a-tag>
    </div>
  </a-upload>
</template>

<script>
import { UploadOutlined } from '@ant-design/icons-vue'
import { uploadNodeFile } from '@/requests'
export default {
  data () {
    return {
      accept: '.py',
      info: '',
      nodes: {}
    }
  },
  methods: {
    fileAdded (e) {
      this.nodes = {}
      const { file } = e
      console.log(file)
      const formData = new FormData()
      formData.append('file', file)
      this.$emit('uploadStart')
      uploadNodeFile(formData).then(nodes => {
        this.$emit('uploadFinish')
        this.nodes = nodes
        this.$emit('nodesList', nodes)
        this.successInfoVisiable = true
        this.info = '解析成功'
      }).catch(error => {
        console.log(error)
        this.$emit('uploadFinish')
        this.info = error.message
        this.$emit('nodesList', false)
        this.successInfoVisiable = false
      })
    }
  },
  components: {
    UploadOutlined
  }
}
</script>