antdv 获取 axios文件上传实时进度

 

 

<template>
  <div style="max-width: 890px">
    <a-form-model
      ref="ruleForm"
      :rules="rules"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item
        ref="filefrom"
        label="名称"
        prop="name"
      >
        <a-input
          placeholder="name"
          v-model="form.name"
        />
      </a-form-model-item>
      <a-form-model-item
        label="备注"
        prop="desc"
      >
        <a-input
          type="textarea"
          style="height: 60px;width: 100%"
          v-model="form.desc"
        />
      </a-form-model-item>
      <a-form-model-item label="文件选择">
        <a-upload
          :before-upload="beforeUpload"
          :remove="handleRemove"
          :multiple="false"
          :file-list="fileList"
        >
          <a-button>
            <a-icon type="upload" /> Select File
          </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button
          type="primary"
          @click="onSubmit"
        >提交</a-button>
        <a-button
          style="margin-left: 10px;"
          @click="resetForm"
        >重填</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-modal
      title="上传进度"
      v-model="visible"
      :footer="null"
    >
      <a-progress
        :percent="uploadRate"
        type="line"
        showInfo
        :strokeWidth="strokeWidth"
        :strokeColor="strokeColor"
      />
      <a-progress
        :percent="uploadRate"
        type="dashboard"
        showInfo
      />
    </a-modal>
  </div>
</template>>

<script>
import { FileUpload } from '@/networks/file'

export default {
  data () {
    return {
      visible: false,
      strokeWidth: 20,
      strokeColor: { '0%': '#108ee9', '100%': '#87d068' },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      fileList: [],
      uploading: false,
      uploadRate: 0,
      form: {
        name: '',
        desc: ''
      },
      rules: {
        name: [{ required: true, message: 'Please select filefrom!' }],
      }
    }
  },
  methods: {
    // 文件移除
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    // 上传文件点击确认
    onSubmit () {
      this.visible = true
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const formData = new FormData()
          this.fileList.forEach((file) => {
            formData.append('file', file)
          })

          for (const prop in this.form) {
            if (Object.prototype.hasOwnProperty.call(this.form, prop)) {
              formData.append(prop, this.form[prop])
            }
          }
          this.uploading = true

          const config = {
            // headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: e => {
              if (e.lengthComputable) {
                const rate = this.uploadRate = (e.loaded / e.total * 100 | 0) // 已上传的比例
                if (rate < 1) {
                      //这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道
                       //因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败
                       //等响应回来时，再将进度设为100%
                  this.uploadRate = rate
                }
              }
            }
          }

          const res = await FileUpload(formData, config)
            .then((res) => {
              if (res.code === 200) {
                this.fileList = []
                this.uploading = false
                this.visible = false
                this.$msgsuccess(res.msg)
                this.$router.push({ name: 'FileList' })
                // this.$emit('getPath',)
              } else {
                this.uploading = false
                this.$msgerror(res.msg)
              }
            }).catch(() => {
              return false
            })
        }
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="sass" scoped>
</style>