support upload abort

examples/docs/en-US/upload.md

@@ -367,7 +367,8 @@ auto-upload | whether to auto upload file | boolean | — | true |
 http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
 disabled | whether to disable upload | boolean | — | false |
 
-### Events
+### Methods
-| Event Name | Description | Parameters |
+| Methods Name | Description | Parameters |
 |---------- |-------- |---------- |
 | clearFiles | clear the uploaded file list | — |
+| abort | cancel upload request | （ file: fileList's item ） |

examples/docs/zh-CN/upload.md

@@ -420,3 +420,4 @@
 | 方法名      | 说明          | 参数 |
 |---------- |-------------- | -- |
 | clearFiles | 清空已上传的文件列表 | — |
+| abort | 取消上传请求 | （ file: fileList 中的 file 对象 ） |

packages/upload/src/index.vue

@@ -19,6 +19,10 @@ export default {
     IframeUpload
   },
 
+  provide: {
+    uploader: this
+  },
+
   props: {
     action: {
       type: String,
@@ -166,6 +170,7 @@ export default {
       if (raw) {
         file = this.getFile(raw);
       }
+      this.abort(file);
       var fileList = this.uploadFiles;
       fileList.splice(fileList.indexOf(file), 1);
       this.onRemove(file, fileList);
@@ -179,6 +184,9 @@ export default {
       });
       return target;
     },
+    abort(file) {
+      this.$refs['upload-inner'].abort(file);
+    },
     clearFiles() {
       this.uploadFiles = [];
     },

packages/upload/src/upload.vue

@@ -3,6 +3,7 @@ import ajax from './ajax';
 import UploadDragger from './upload-dragger.vue';
 
 export default {
+  inject: ['uploader'],
   components: {
     UploadDragger
   },
@@ -47,7 +48,8 @@ export default {
 
   data() {
     return {
-      mouseover: false
+      mouseover: false,
+      reqs: {}
     };
   },
 
@@ -95,7 +97,23 @@ export default {
         this.onRemove(rawFile, true);
       }
     },
+    abort(file) {
+      const { reqs } = this;
+      if (file) {
+        let uid = file;
+        if (file.uid) uid = file.uid;
+        if (reqs[uid]) {
+          reqs[uid].abort();
+        }
+      } else {
+        Object.keys(reqs).forEach((uid) => {
+          if (reqs[uid]) reqs[uid].abort();
+          delete reqs[uid];
+        });
+      }
+    },
     post(rawFile) {
+      const { uid } = rawFile;
       const options = {
         headers: this.headers,
         withCredentials: this.withCredentials,
@@ -108,14 +126,17 @@ export default {
         },
         onSuccess: res => {
           this.onSuccess(res, rawFile);
+          delete this.reqs[uid];
         },
         onError: err => {
           this.onError(err, rawFile);
+          delete this.reqs[uid];
         }
       };
-      const requestPromise = this.httpRequest(options);
+      const req = this.httpRequest(options);
-      if (requestPromise && requestPromise.then) {
+      this.reqs[uid] = req;
-        requestPromise.then(options.onSuccess, options.onError);
+      if (req && req.then) {
+        req.then(options.onSuccess, options.onError);
       }
     },
     handleClick() {