iview+axios實現文件取消上傳

iview+axios實現文件取消上傳

iview框架的上傳文件目前不支持在上傳文件的過程當中取消上傳，結合axios請求能夠實現：使用iview的上傳和拖拽功能，卻使用axios的上傳文件功能來實現取消上傳。

html

<Upload
  type="drag"
  class="upload-small-area"
  :show-upload-list="false"
  :before-upload="beforeUpload"
  action="/example/api/file">
  <div class="upload-small-cont">
      <p class="upload-small-tip">點擊/拖拽上傳文件</p>
      <p class="upload-small-tip">請上傳apk/ipa格式文件</p>
  </div>
</Upload>

<!-- 上傳彈窗 -->
<Modal
    title="Title"
    v-model="uploadModal"
    :mask-closable="false"
    @on-cancel="closeUpModal"
    class-name="opera-modal">
    <div class="upload-progress">
      <p class="file-name">{{fileName}}</p>
      <Progress :percent="filePercent" :stroke-width="3"></Progress>   <!-- 進度條 -->
      <div class="progress-btn" v-show="filePercent !== 100">
        <Button type="ghost" class="modu-ghost-btn" @click="closeUpModal">取消</Button>
      </div>
      <div class="progress-success-btn" v-show="filePercent === 100">
        <Button type="ghost" class="modu-ghost-btn">下一步</Button>
        <Button type="primary" class="modu-primary-btn">直接發佈</Button>
      </div>
    </div>
</Modal>

<!-- 失敗彈窗 -->
<Modal
    title="上傳"
    v-model="errorModal"
    @on-cancel="closeErrModal"
    :mask-closable="false"
    class-name="opera-modal">
    <div class="upload-error">
      <div class="upload-error-status">
        <p class="upload-error-tip">不支持的上傳，請上傳apk或ipa文件</p>
      </div>
      <div class="upload-error-btn">
        <Button type="ghost" class="modu-ghost-btn" @click="closeErrModal">取消</Button>
        <Upload
          class="reUpload-btn"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          action="/example/api/file">
          <Button type="primary" class="modu-primary-btn">從新上傳</Button>
        </Upload>
      </div>
    </div>
</Modal>

js

export default {
data(){
    return {
      fileformat: ['apk', 'ipa'],  // 容許上傳的文件類型
      fileName: null, // 文件名字
      filePercent: 0, // 上傳進度
      uploadModal: false, // 上傳彈窗
      errorModal: false,  // 上傳失敗彈窗
      cancelUpload: null  // 取消上傳
    }
  },
methods:{
    // 上傳以前
    beforeUpload(file) {
      console.log("上傳以前")
      console.log(file)
      this.fileAjaxUpload(file);
      return false;    // 阻止使用iview的上傳功能
    },
    // 關閉上傳彈窗/取消上傳
    closeUpModal() {
      console.log("取消上傳");
      if(this.cancelUpload){ // 判斷cancelUpload是否存在
        this.cancelUpload.cancel('取消上傳'); //在請求catch()的error中輸出'取消上傳'
      }
    },
    // 關閉上傳失敗彈窗
    closeErrModal() {
      this.errorModal = 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.$Message.error("文件格式不正確,請上傳apk/ipa格式文件");
        return false;
      }
      // 上傳文件
      let fd = new FormData(); // 聲明formData()
      fd.append('file', file);
      let CancelToken = this.$http.CancelToken;
      this.cancelUpload = CancelToken.source();
      this.$http({
          url:'/example/api/file',
          method:'post',
          data: fd,
          transformRequest: [function(data){
            return data;
          }],
          cancelToken: self.cancelUpload.token, // 取消事件
          onUploadProgress: function(progressEvent) { // 上傳進度事件
              if(progressEvent.lengthComputable){
                  // 屬性lengthComputable主要代表總共須要完成的工做量和已經完成的工做是否能夠被測量
                  // 若是lengthComputable爲false，就獲取不到progressEvent.total和progressEvent.loaded
                  console.log(progressEvent)
                  self.uploadModal = true;
                  self.errorModal = false;
                  self.filePercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2));
              }
          }
      }).then(res =>{
        // 上傳成功
        console.log(res)
      }).catch(error =>{
          console.log(error)
          if (self.$http.isCancel(error)) { // 取消上傳
            self.uploadModal = false;
            self.$Message.info(error.message);
          } else {
            self.uploadModal = false;
            self.errorModal = true;
          }
      })
    }
  }
}