新增文章编辑toolbar图片上传功能

src/core/const.js

@@ -18,7 +18,8 @@ const toolbars = {
   trash: true, // 清空
   navigation: true, // 导航目录
   subfield: true, // 单双栏模式
-  preview: true // 预览
+  preview: true, // 预览
+  imagelink: true // 图片链接
 }
 
 export { toolbars }

src/views/post/PostEdit.vue

@@ -13,11 +13,13 @@
 
         <div id="editor">
           <mavon-editor
+            ref="md"
             v-model="postToStage.originalContent"
             :boxShadow="false"
             :toolbars="toolbars"
             :ishljs="true"
             :autofocus="false"
+            @imgAdd="pictureUploadHandle"
           />
         </div>
       </a-col>
@@ -202,6 +204,7 @@ import 'mavon-editor/dist/css/index.css'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
 import optionApi from '@/api/option'
+import attachmentApi from '@/api/attachment'
 export default {
   components: {
     TagSelect,
@@ -347,6 +350,21 @@ export default {
           this.autoSavePost()
         }, 15000)
       }
+    },
+    pictureUploadHandle(pos, $file) {
+      var formdata = new FormData()
+      formdata.append('file', $file)
+      attachmentApi.upload(formdata).then((response) => {
+        var responseObject = response.data
+
+        if (responseObject.status === 200) {
+          var MavonEditor = this.$refs.md
+          MavonEditor.$img2Url(pos, responseObject.data.path)
+          this.$message.success('图片上传成功')
+        } else {
+          this.$message.error('图片上传失败：' + responseObject.message)
+        }
+      })
     }
   }
 }