feat: 添加上传事件发射 (#92)

* feat: 添加upload-start和upload-end事件 * feat: 添加upload-start和upload-end事件 * feat: 添加upload-start和upload-end事件 Co-authored-by: snowlocked <[email protected]>
FEMessage · Apr 30, 2020 · c0ea46a · c0ea46a
1 parent 34c62f3
commit c0ea46a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/docs/basic.md b/docs/basic.md
@@ -3,7 +3,7 @@
 ```vue
 <template>
   <div>
-    <v-editor @ready="editor = $event" v-model="content" />
+    <v-editor @ready="editor = $event" v-model="content"/>
     <el-button @click="toggleInspector" style="margin-top: 5px">{{flag ? '关闭' : '打开'}}数据结构视图</el-button>
   </div>
 </template>
@@ -13,7 +13,7 @@ export default {
     return {
       content: '',
       editor: null,
-      flag: false
+      flag: false,
     }
   },
   watch: {
@@ -29,7 +29,8 @@ export default {
         ? CKEditorInspector.destroy()
         : CKEditorInspector.attach({basic: this.editor})
       this.flag = !this.flag
-    }
+    },
+    
   },
 }
 </script>

diff --git a/docs/upload-options.md b/docs/upload-options.md
@@ -1,8 +1,9 @@
 覆盖默认的上传行为，可以自定义上传的实现
+注意beforeUpload等上传流程外的事件可能不生效
 
 ```vue
 <template>
-  <v-editor ref="e" v-model="content" :upload-options="uploadOptions" />
+  <v-editor ref="e" v-model="content" :upload-options="uploadOptions"  @upload-start="uploadStart" @upload-end="uploadEnd"  />
 </template>
 
 <script>
@@ -11,7 +12,6 @@ export default {
     return {
       content: '',
       uploadOptions: {
-        beforeUpload: () => console.log('before upload'),
         request: this.myUpload
       }
     }
@@ -23,6 +23,12 @@ export default {
           resolve('\/\/deepexi.oss-cn-shenzhen.aliyuncs.com/deepexi-services/logo_Deepexi_640x640.jpg')
         }, 2000)
       })
+    },
+    uploadStart(){
+      console.log('start')
+    },
+    uploadEnd(status, res){
+      console.log('end', status, res)
     }
   }
 }

diff --git a/src/v-editor.vue b/src/v-editor.vue
@@ -80,7 +80,7 @@ export default {
   computed: {
     editorConfig() {
       // $refs 在 mounted 阶段才挂载，这里不能直接传实例
-      const uploadImg = file => this.$refs.uploadToAli.uploadRequest(file)
+      const uploadImg = this.uploadFile
       return merge(
         defaultEditorOptions,
         {
@@ -121,6 +121,18 @@ export default {
       this.editor = editor
       editor.ui.view.element.classList.add('markdown-body')
       this.setHeight()
+    },
+    uploadFile(file) {
+      const request = this.$refs.uploadToAli.uploadRequest(file)
+      this.$emit('upload-start')
+      request
+        .then(res => {
+          this.$emit('upload-end', true, res)
+        })
+        .catch(e => {
+          this.$emit('upload-end', false, e)
+        })
+      return request
     }
   }
 }