vue-resource+iview上传文件取消上传

vue-resource+iview上传文件取消上传

子组件：

<template>
  <div class="upload-area-div">
    <Upload
      :type="upType"
      class="upload-area"
      :show-upload-list="false"
      :before-upload="beforeUpload"
      :action="uploadUrl">
      <slot></slot>
    </Upload>

    <!-- 上传弹窗 -->
    <Modal
        title="上传"
        class-name="flex-center-modal opera-modal not-footer"
        v-model="uploadModal"
        :mask-closable="false"
        @on-cancel="closeUpModal">
        <div class="upload-progress">
          <p class="file-name">{{fileName}}</p>
          <Progress class="modu-progress" :percent="filePercent" :stroke-width="3"></Progress>
          <div class="progress-btn">
            <Button type="ghost" size="large" class="modu-ghost-btn" v-show="filePercent !== 100" @click="closeUpModal">取消</Button>
            <!-- <Button type="primary" size="large" class="modu-primary-btn" v-show="filePercent === 100" @click="onComplete">完成</Button> -->
          </div>
        </div>
    </Modal>

    <!-- Loading提示 -->
    <Spin size="large" fix v-if="loadFlag" class="modu-spin">
      <Icon type="load-c" size=18 class="modu-spin-icon-load"></Icon>
      <div class="modu-spin-text">Loading</div>
    </Spin>

  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      upType: {   // 是否允许拖拽上传,select为点击上传
        type: String,
        default: "drag"
      },
      uploadUrl: {   // 上传文件接口
        type: String,
        default: "/example/api/file"
      },
      fileformat: {  // 允许上传的文件类型后缀
        type: Array,
        default: function() {
          return ['zip']
        }
      }
    },
    data(){
      return {
        fileName: null, // 文件名字
        filePercent: 0, // 上传进度
        uploadModal: false, // 上传弹窗
        fileUrl:'',
        loadFlag: false,
        previousRequest: null
      }
    },
    mounted(){

    },
    methods:{
      // 上传之前
      beforeUpload(file) {
        // console.log("上传之前")
        this.loadFlag = true;
        this.fileAjaxUpload(file);
        return false;
      },
      // 关闭上传弹窗/取消上传
      closeUpModal() {
        this.$Message.info('取消上传');
        if (this.previousRequest) {
          this.previousRequest.abort();
        }
        this.uploadModal = false;
      },
      // 上传文件请求
      fileAjaxUpload(file) {
        let self = this;
        this.fileName = file.name;
        // 验证上传的文件类型
        let index1 = file.name.lastIndexOf(".");
        let index2 = file.name.length;
        let fileSuffix = file.name.substring(index1+1, index2).toLowerCase();
        if (this.fileformat.indexOf(fileSuffix) == -1) { // 类型不符合
          this.loadFlag = false;
          this.$Message.error("文件格式不正确,请上传zip格式文件");
          return false;
        }
        let fd = new FormData(); // 声明formData()
        fd.append('file', file);
        this.$http({
          url: self.uploadUrl,
          method:'post',
          body: fd,
          before(request) {
            self.previousRequest = request;
          },
          progress: function(progressEvent) { // 上传进度事件
            self.loadFlag = false;
            if(progressEvent.lengthComputable){
                // 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                // 如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                self.uploadModal = true;
                let _percent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2));
                self.filePercent = _percent < 100 ? _percent : 99;
            }
          }
        }).then((response) =>{
          // 上传成功
          let resp = response.data;
          if (resp.status === 200) {
            self.filePercent = 100;
            self.fileUrl = resp.data;
            self.$emit('onComplete', resp.data);
            self.$Message.success('上传成功');
          } else {
            if (resp.status !== 401) {
              self.$Message.error(resp.desc);
            }
          }
          this.uploadModal = false;
        }).catch(error =>{
          self.loadFlag = false;
          self.uploadModal = false;
          if (self.previousRequest) {
            self.previousRequest.abort();
          }
        })
      }
    }
  }
</script>

父组件调用：

<m-upload @onComplete="onComplete">
  <div class="offLine-war">
    <div class="offLine-war-title">{{ fileUrl ? '重新上传' : '上传压缩包' }}</div>
  </div>
</m-upload>

<script>
  import mUpload from '@/components/mUpload/mUpload.vue';
  export default {
    data() {
      return {
        fileUrl: ''
      }
    },
    components: {
      mUpload: mUpload
    },
    methods: {
      onComplete(fileUrl) {
        this.fileUrl = fileUrl;
      }
    }
  }
</script>