视频上传功能实现

client/.env.dev

@@ -12,6 +12,9 @@ VITE_BASE_URL='http://10.10.10.7:18080'
 # 上传路径
 VITE_UPLOAD_URL='/infra/file/upload'
 
+# 上传配置对应的编号ID
+VITE_UPLOAD_CLIENT_ID=5
+
 # File上传路径
 VITE_FILE_BASE_URI='/infra/file'
 

client/.env.pro

@@ -8,6 +8,8 @@ VITE_BASE_URL='https://oa.zjugis.com:28080'
 
 # 上传路径
 VITE_UPLOAD_URL='/infra/file/upload'
+# 上传配置对应的编号ID
+VITE_UPLOAD_CLIENT_ID=5
 
 # File上传路径
 VITE_FILE_BASE_URI='/infra/file'

client/src/components/Tinymce/Tinymce.vue

@@ -22,6 +22,7 @@ import 'tinymce/plugins/insertdatetime'
 import 'tinymce/plugins/link'
 import 'tinymce/plugins/lists'
 import 'tinymce/plugins/image'
+import 'tinymce/plugins/media'
 import 'tinymce/plugins/nonbreaking'
 import 'tinymce/plugins/noneditable'
 import 'tinymce/plugins/pagebreak'
@@ -152,6 +153,37 @@ const initOptions = computed(() => {
     skin: 'oxide',
     skin_url: '/resource/tinymce/skins/ui/oxide',
     content_css: '/resource/tinymce/skins/ui/oxide/content.min.css',
+    media_upload_handler() {},
+    file_picker_types: 'media', //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发
+    file_picker_callback: function (callback, value, meta) {
+      if (meta.filetype === 'file') {
+        callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' })
+      }
+      if (meta.filetype === 'image') {
+        callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' })
+      }
+      if (meta.filetype === 'media') {
+        let input = document.createElement('input')
+        input.setAttribute('type', 'file')
+        input.setAttribute('accept', '.mp4')
+        input.onchange = function () {
+          let file = this.files[0]
+          const url = import.meta.env.VITE_UPLOAD_URL
+          const formData = new FormData()
+          const arr = file.name.split('.')
+          if (arr.length > 1) {
+            const suffix = arr[arr.length - 1]
+            formData.append('path', `${buildUUID()}.${suffix}`)
+          }
+          formData.append('file', file)
+          formData.append('clientId', import.meta.env.VITE_UPLOAD_CLIENT_ID)
+          request.upload({ url: url, data: formData }).then((result) => {
+            callback(result['data'])
+          })
+        }
+        input.click()
+      }
+    },
     images_upload_handler(blobInfo, succFun, failFun) {
       const file = blobInfo.blob()
       const url = import.meta.env.VITE_UPLOAD_URL

client/src/components/Tinymce/tinymce.js

@@ -5,10 +5,10 @@
 // colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
 
 export const plugins = [
-  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists image nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus  template  textpattern visualblocks visualchars wordcount'
+  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists image media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus  template  textpattern visualblocks visualchars wordcount'
 ]
 
 export const toolbar = [
   'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
-  'hr bullist numlist link  preview anchor pagebreak insertdatetime image  forecolor backcolor fullscreen'
+  'hr bullist numlist link  preview anchor pagebreak insertdatetime image media forecolor backcolor fullscreen'
 ]