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>