vue3+wangEditor 5 的图片自定义上传

因为wangEditor的图片上传参数无法满足需求所以需要用自己的上传来覆盖原先的上传

覆盖原生的图片上传操作方法是

 async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法,这里是覆盖原生的上传，这里覆盖的原因是我们图片要做一定的加密，但是原生的不能做到携带我们的参数
            // file 即选中的文件
            // 最后插入图片
            // insertFn(url, alt, href)
            console.log('shangchaun :>> ', file, insertFn);
            let url = import.meta.env.VITE_UPLOAD_URL//这里是请求路径
            try {
              const response = await axios.post(url,
                {
                  file: file,
                  sign: getSign(file.name),
                  fileName: file.name,
                  path: null
                }
                , {
                  headers: {
                    'Content-Type': 'multipart/form-data',
                    'Accept': 'application/json, text/plain, */*',
                  },
                }); // 替换为你的 API 端点和数据
              console.log('POST response:', response.data);
              if (response.data.code != 500) {
                insertFn(response.data.data, response.data.data, response.data.data) // 插入图片，参数：图片 src、alt、href
              } else {
                message.error(response.data.msg)
              }
            } catch (error) {
              console.error('Error posting data:', error);
            }
          }

在这里需要注意在进行post请求时，需要注意headers里的对象和原生的是否一致，这一点很重要

第二就是返回的传输路径需要使用insertFn方法再插入进富文本框

完整代码，这个是封装的富文本组件的内容

这个是Editor.vue

<script lang="ts" setup>
import { PropType } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nChangeLanguage, IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
import { ElMessage } from 'element-plus'
import { useLocaleStore } from '@/store/modules/locale'
import { getAccessToken, getTenantId } from '@/utils/auth'
import axios from 'axios'

const message = useMessage() // 消息弹窗


import CryptoJS from 'crypto-js';

const secretKey