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>