✨ WangEditor 图片上传功能

Author: Hccake

src/api/notify/announcement.js

@@ -46,3 +46,11 @@ export function close(id) {
     method: 'patch'
   })
 }
+
+export function uploadImage (resultFiles) {
+  const formData = new FormData()
+  resultFiles.forEach(file  => {
+    formData.append('files', file);
+  });
+  return request.post('/notify/announcement/image', formData, { contentType: false, processData: false })
+}

src/components/Editor/WangEditor.vue

@@ -11,6 +11,10 @@ export default {
     // eslint-disable-next-line
     value: {
       type: String
+    },
+    // 图片上传的服务端接口
+    uploadImgReq: {
+      type: Function
     }
   },
   data () {
@@ -46,7 +50,24 @@ export default {
         // v-model 方式的表单值联动
         this.$emit('input', this.editorData)
       }
-      editor.config.zIndex = 500
+      editor.config.zIndex = 100
+      // 图片配置
+      const uploadImgReq = this.uploadImgReq
+      if(uploadImgReq){
+        const that = this
+        editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+          // resultFiles 是 input 中选中的文件列表
+          // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+          uploadImgReq(resultFiles).then(res => {
+            // 上传图片，返回结果，将图片插入到编辑器中
+            // TODO 图片大小控制
+            for (let objectName of res.data) {
+              const imgUrl = that.fileAbsoluteUrl(objectName)
+              insertImgFn(imgUrl)
+            }
+          })
+        }
+      }
       // 创建编辑器
       editor.create()
       this.editor = editor

src/views/notify/announcement/AnnouncementForm.vue

@@ -9,7 +9,10 @@
     </a-form-item>
 
     <a-form-item label="内容">
-      <wang-editor v-decorator="['content', decoratorOptions.content]"></wang-editor>
+      <wang-editor
+        v-decorator="['content', decoratorOptions.content]"
+        :upload-img-req="reqFunctions.uploadImage"
+      ></wang-editor>
     </a-form-item>
 
     <a-form-item label="选择接收人">
@@ -97,7 +100,7 @@
 
 <script>
 import { FormPageMixin } from '@/mixins'
-import { addObj, putObj } from '@/api/notify/announcement'
+import { addObj, putObj, uploadImage } from '@/api/notify/announcement'
 import { getSelectData } from '@/api/sys/role'
 import { getTree } from '@/api/sys/organization'
 import WangEditor from '@/components/Editor/WangEditor'
@@ -111,7 +114,8 @@ export default {
     return {
       reqFunctions: {
         create: addObj,
-        update: putObj
+        update: putObj,
+        uploadImage: uploadImage
       },
 
       // 校验配置