From 2cce250d1c0558641ce87341b0a9fc7198af99a9 Mon Sep 17 00:00:00 2001
From: FE_Daizhen <934621328@qq.com>
Date: Mon, 20 Jun 2022 23:32:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=85=E5=AE=B9=E7=AE=A1=E7=90=86=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=8A=9F=E8=83=BD--06202332?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TinymceEditor/index.vue |  8 ++--
 src/components/TinymceEditor/option.js | 88 ++++++++++++++++++++++++++++++++++
 src/views/content/content-edit.vue     |  2 +-
 src/views/content/create_form.js       | 32 ++++++++-----
 4 files changed, 112 insertions(+), 18 deletions(-)
 create mode 100644 src/components/TinymceEditor/option.js

diff --git a/src/components/TinymceEditor/index.vue b/src/components/TinymceEditor/index.vue
index 905a49f..b305318 100644
--- a/src/components/TinymceEditor/index.vue
+++ b/src/components/TinymceEditor/index.vue
@@ -9,6 +9,7 @@
 
 <script>
 import tinymce from 'tinymce/tinymce';
+import { file_picker_callback, images_upload_handler } from './option'
 import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/code';
@@ -123,12 +124,9 @@ const defaultConfig = {
     'rtl'
   ].join(' '),
   toolbar_drawer: 'sliding',
-  images_upload_handler: (blobInfo, success) => {
-    success('data:image/jpeg;base64,' + blobInfo.base64());
-  },
+  images_upload_handler: images_upload_handler,
   file_picker_types: 'media',
-  file_picker_callback: () => {
-  }
+  file_picker_callback: file_picker_callback
 };
 
 export default {
diff --git a/src/components/TinymceEditor/option.js b/src/components/TinymceEditor/option.js
new file mode 100644
index 0000000..b450441
--- /dev/null
+++ b/src/components/TinymceEditor/option.js
@@ -0,0 +1,88 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+import setting from '@/config/setting';
+let token =  localStorage.getItem('access_token')
+
+
+const GLOB_UPLOAD_URL = setting.uploadImageUrl+'?upload_type=img'
+// @ts-ignore
+export const file_picker_callback = (callback, value, meta) => {
+  // 文件分类
+  var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
+  // 后端接收上传文件的地址
+  var upurl = GLOB_UPLOAD_URL
+  // 为不同插件指定文件类型及后端地址
+  switch (meta.filetype) {
+    case 'image':
+      filetype = '.jpg, .jpeg, .png, .gif'
+      break
+    case 'media':
+      filetype = '.mp3, .mp4'
+      break
+    case 'file':
+    default:
+  }
+  // 模拟出一个input用于添加本地文件
+  var input = document.createElement('input')
+  input.setAttribute('type', 'file')
+  input.setAttribute('accept', filetype)
+  input.click()
+  input.onchange = () => {
+    // @ts-ignore
+    var file = this.files[0]
+
+    var xhr, formData
+    xhr = new XMLHttpRequest()
+    xhr.withCredentials = false
+    xhr.open('POST', upurl)
+    xhr.onload = () => {
+      var json
+      if (xhr.status !== 200) {
+        // failure('HTTP Error: ' + xhr.status)
+        return
+      }
+      json = JSON.parse(xhr.responseText)
+      if (!json || json.code !== '200') {
+        // failure('Invalid JSON: ' + xhr.responseText)
+        return
+      }
+      callback(json.message, { text: file.name })
+    }
+    formData = new FormData()
+    formData.append('file', file, file.name)
+    formData.append('token', token)
+    xhr.send(formData)
+  }
+}
+
+export const images_upload_handler = (blobInfo, succFun, failFun) => {
+  var xhr, formData
+  var file = blobInfo.blob() // 转化为易于理解的file对象
+  // console.log(file)
+  xhr = new XMLHttpRequest()
+  xhr.withCredentials = false
+  xhr.open('POST', GLOB_UPLOAD_URL)
+  xhr.onload = () => {
+    var json
+    if (xhr.status !== 200) {
+      failFun('HTTP Error: ' + xhr.status)
+      return
+    }
+    json = JSON.parse(xhr.responseText)
+    console.log(xhr.responseText)
+
+    if (!json || json.code !== 0) {
+      // failFun('Invalid JSON: ' + xhr.responseText)
+      return
+    }
+    console.log(json.url)
+    succFun(json.url)
+  }
+  formData = new FormData()
+  formData.append('file', file, file.name) // 此处与源文档不一样
+  formData.append('token', token)
+  xhr.send(formData)
+}
diff --git a/src/views/content/content-edit.vue b/src/views/content/content-edit.vue
index 440ee5d..521e6a1 100644
--- a/src/views/content/content-edit.vue
+++ b/src/views/content/content-edit.vue
@@ -1,6 +1,6 @@
 <!-- 用户编辑弹窗 -->
 <template>
-  <el-dialog :title="isUpdate?'编辑':'添加'" :visible="visible" width="80%" :destroy-on-close="true" :lock-scroll="false"
+  <el-dialog :title="isUpdate?'编辑':'添加'" :visible="visible" width="80%" :destroy-on-close="true" :lock-scroll="false" :close-on-click-modal="false"
     custom-class="ele-dialog-form" @update:visible="updateVisible">
     <!-- <p>formData: {{dig_value}}</p> -->
     <form-create v-model="formApi" :rule="edit_rule" :option="dig_option"></form-create>
diff --git a/src/views/content/create_form.js b/src/views/content/create_form.js
index 320b5c8..40b6fd9 100644
--- a/src/views/content/create_form.js
+++ b/src/views/content/create_form.js
@@ -1,5 +1,6 @@
 
 import setting from '@/config/setting';
+let token =  localStorage.getItem('access_token')
 
 export function getForm(valNew) {
   const rule = []
@@ -51,30 +52,37 @@ export function getForm(valNew) {
     if (e.type === 'file') {
       eItem.type = 'upload'
       eItem.props = {
+        headers: { token },
         type: 'drag',
         uploadType: 'file',
-        action: setting.uploadImageUrl,
-        name: 'pic',
+        action: setting.uploadImageUrl+'?upload_type=file',
+        name: 'file',
         multiple: true, // 多选
         limit: 2,
         onSuccess: function(res, file) {
-          file.url = res.data.filePath;
+          if(res.code ==0){
+            file.url = res.url;
+          }
         }
       }
     }
-    if (e.type === 'image' || e.type === 'images') {
-      eItem.type = 'upload'
+    if (e.type === "image" || e.type === "images") {
+      eItem.type = "upload"
       eItem.props = {
-        type: 'select',
-        uploadType: 'image',
-        action: setting.uploadImageUrl,
-        name: 'pic',
+        headers: { token },
+        type: "select",
+        uploadType: "image",
+        action: setting.uploadImageUrl+'?upload_type=img',
+        name: "file",
         multiple: true,
-        accept: 'image',
-        limit: 1, //可上传文件数量 (limit: 2,)
+        // accept: "image\/*",
+        maxLength: 1, //可上传文件数量 (limit: 2,)
         allowRemove: true, //是否可删除,设置为false是不显示删除按钮
         onSuccess: function(res, file) {
-          file.url = res.data.filePath;
+          if(res.code ==0){
+            file.url = res.url;
+          }
+
         }
       }
     }