perf: editor image upload

xingyu4j
1 parent 48427994
Showing 2 changed files with 43 additions and 12 deletions
yudao-ui-admin-vue3/package.json
yudao-ui-admin-vue3/src/components/Editor/src/Editor.vue
@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.2.1",
-    "@vueuse/core": "^9.0.2",
+    "@vueuse/core": "^9.1.0",
     "@wangeditor/editor": "^5.1.14",
     "@wangeditor/editor-for-vue": "^5.1.10",
-    "@zxcvbn-ts/core": "^2.0.3",
+    "@zxcvbn-ts/core": "^2.0.4",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "dayjs": "^1.11.4",
@@ -49,7 +49,7 @@
     "url": "^0.11.0",
     "vue": "3.2.37",
     "vue-cropper": "^1.0.3",
-    "vue-i18n": "9.2.0",
+    "vue-i18n": "9.2.2",
     "vue-router": "^4.1.3",
     "vue-types": "^4.2.1",
     "web-storage-cache": "^1.1.1"
@@ -62,7 +62,7 @@
     "@purge-icons/generated": "^0.8.1",
     "@types/intro.js": "^5.1.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.6.3",
+    "@types/node": "^18.6.4",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
@@ -92,7 +92,7 @@
     "stylelint-config-standard": "^26.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "4.7.4",
-    "unplugin-vue-define-options": "^0.7.1",
+    "unplugin-vue-define-options": "^0.7.3",
     "vite": "3.0.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.7.0",
@@ -101,7 +101,7 @@
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.7",
-    "vue-tsc": "^0.39.4",
+    "vue-tsc": "^0.39.5",
     "windicss": "^3.5.6"
   },
   "engines": {
@@ -8,6 +8,8 @@ import { ElMessage } from &#39;element-plus&#39;
 import { useLocaleStore } from '@/store/modules/locale'
 import { getAccessToken, getTenantId } from '@/utils/auth'
+type InsertFnType = (url: string, alt: string, href: string) => void
+
 const localeStore = useLocaleStore()
 const currentLocale = computed(() => localeStore.getCurrentLocale)
@@ -85,29 +87,58 @@ const editorConfig = computed((): IEditorConfig =&gt; {
         ['uploadImage']: {
           server: import.meta.env.VITE_UPLOAD_URL,
           // 单个文件的最大体积限制，默认为 2M
-          maxFileSize: 2 * 1024 * 1024,
+          maxFileSize: 5 * 1024 * 1024,
           // 最多可上传几个文件，默认为 100
           maxNumberOfFiles: 10,
           // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
           allowedFileTypes: ['image/*'],
           // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
-          meta: {},
+          meta: { updateSupport: 0 },
           // 将 meta 拼接到 url 参数中，默认 false
-          metaWithUrl: false,
+          metaWithUrl: true,
           // 自定义增加 http  header
           headers: {
-            Accept: 'image/*',
+            Accept: '*',
             Authorization: 'Bearer ' + getAccessToken(),
             'tenant-id': getTenantId()
           },
           // 跨域是否传递 cookie ，默认为 false
-          withCredentials: false,
+          withCredentials: true,
           // 超时时间，默认为 10 秒
-          timeout: 5 * 1000 // 5 秒
+          timeout: 5 * 1000, // 5 秒
+
+          // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
+          fieldName: 'file',
+
+          // 上传之前触发
+          onBeforeUpload(file: File) {
+            console.log(file)
+            return file
+          },
+          // 上传进度的回调函数
+          onProgress(progress: number) {
+            // progress 是 0-100 的数字
+            console.log('progress', progress)
+          },
+          onSuccess(file: File, res: any) {
+            console.log('onSuccess', file, res)
+          },
+          onFailed(file: File, res: any) {
+            alert(res.message)
+            console.log('onFailed', file, res)
+          },
+          onError(file: File, err: any, res: any) {
+            alert(err.message)
+            console.error('onError', file, err, res)
+          },
+          // 自定义插入图片
+          customInsert(res: any, insertFn: InsertFnType) {
+            insertFn(res.data, 'image', res.data)
+          }
         }
       },
       uploadImgShowBase64: true