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;
          }
      })
    }
  }
}