add onSuccess && onError hook

examples/docs/upload.md

@@ -26,6 +26,12 @@
       },
       handlePreview(file) {
         console.log(file);
+      },
+      handleSuccess(file, fileList) {
+        console.log(file, fileList);
+      },
+      handleError(err, file, fileList) {
+        console.log(err);
       }
     }
   }
@@ -70,6 +76,8 @@
   :multiple="true"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  :on-success="handleSuccess"
+  :on-error="handleError"
 >
   <i class="el-icon-cloud"></i>
   <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -136,6 +144,8 @@
 | accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | — | — |
 | on-preview | 可选参数, 点击已上传的文件链接时的钩子 | function(file) | — | — |
 | on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
+| on-success | 可选参数, 文件上传成功时的钩子 | function(file, fileList) | — | — |
+| on-error | 可选参数, 文件上传失败时的钩子 | function(err, file, fileList) | — | — |
 | before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
 | thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
 | type | 上传控件类型 | string | select,drag | select |

packages/upload/src/index.vue

@@ -65,6 +65,14 @@ export default {
     onPreview: {
       type: Function,
       default: noop
+    },
+    onSuccess: {
+      type: Function,
+      default: noop
+    },
+    onError: {
+      type: Function,
+      default: noop
     }
   },
 
@@ -78,7 +86,7 @@ export default {
   },
 
   methods: {
-    onStart(file) {
+    handleStart(file) {
       file.uid = Date.now() + this.tempIndex++;
       let _file = {
         status: 'uploading',
@@ -100,30 +108,33 @@ export default {
 
       this.uploadedFiles.push(_file);
     },
-    onProgress(ev, file) {
+    handleProgress(ev, file) {
       var _file = this.getFile(file);
       _file.percentage = ev.percent;
     },
-    onSuccess(res, file) {
+    handleSuccess(res, file) {
       var _file = this.getFile(file);
 
       if (_file) {
         _file.status = 'finished';
         _file.response = res;
 
+        this.onSuccess(_file, this.uploadedFiles);
+
         setTimeout(() => {
           _file.showProgress = false;
         }, 1000);
       }
     },
-    onError(err, file) {
+    handleError(err, file) {
       var _file = this.getFile(file);
       var fileList = this.uploadedFiles;
 
       _file.status = 'fail';
 
       fileList.splice(fileList.indexOf(_file), 1);
-      this.$emit('error', _file, fileList, err);
+
+      this.onError(err, _file, fileList);
     },
     handleRemove(file) {
       var fileList = this.uploadedFiles;
@@ -168,10 +179,10 @@ export default {
         'with-credentials': this.withCredentials,
         name: this.name,
         accept: this.thumbnailMode ? 'image/*' : this.accept,
-        'on-start': this.onStart,
-        'on-progress': this.onProgress,
-        'on-success': this.onSuccess,
-        'on-error': this.onError,
+        'on-start': this.handleStart,
+        'on-progress': this.handleProgress,
+        'on-success': this.handleSuccess,
+        'on-error': this.handleError,
         'on-preview': this.handlePreview,
         'on-remove': this.handleRemove
       }