feat: update images upload feature

更新图片上传功能

assets/scripts/editor.js

@@ -117,14 +117,14 @@ let app = new Vue({
         const markdownImage = `![](${imageUrl})`
         // 将 Markdown 形式的 URL 插入编辑框光标所在位置
         this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
-        this.refresh();
-
         this.$message({
           showClose: true,
           message: '图片插入成功',
           type: 'success'
         });
         
+        this.refresh();
+
       } else {
         // 上传失败
         this.$message({
@@ -137,6 +137,13 @@ let app = new Vue({
     failed(error, file, fileList) {
       console.log(error)
     },
+    uploading(event, file, fileList) {
+      this.$message({
+        showClose: true,
+        message: '图片上传中...',
+        type: 'info'
+      });
+    },
     // 刷新右侧预览
     refresh() {
       this.output = this.renderWeChat(this.editor.getValue(0));

index.html

@@ -37,7 +37,7 @@
         <!-- 图片上传 -->
         <el-upload action="https://cors-anywhere.herokuapp.com/https://sm.ms/api/v2/upload"
           headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false" :multiple="false"
-          accept=".jpg,.jpeg,.png,.gif" :limit="1" name="smfile" :on-success="uploaded" :on-error="failed">
+          accept=".jpg,.jpeg,.png,.gif" :limit="1" name="smfile" :on-success="uploaded" :on-error="failed" :on-progress="uploading">
           <i class="el-icon-upload" size="medium">&nbsp;</i>
         </el-upload>
         <el-form size="mini" class="ctrl" :inline=true>