如何基于vue3 + wangeditor富文本 实现上传图片和视频到阿里云 oss并插入到富文本进行回显

功能需求,在富文本中插入图片或视频到阿里云oss中,并在富文本中回显

1. 富文本组件 基础配置

<Editor
      :mode="mode"
      :defaultConfig="state.editorConfig"
      :style="{ height }"
      ref=""
      v-model="state.editorVal"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />

//富文本配置
const state = reactive({
  editorVal: props.getHtml,
  editorConfig: {
    placeholder: props.placeholder,
    MENU_CONF: {},
    editorVal: props.getHtml,
  },
})

2. 配置alioss

• 安装依赖 npm i ali-oss
• utils文件夹下=>创建alioss.ts 代码如下

import OSS from 'ali-oss'
export function client<T>(accessKeyId: T, accessKeySecret: T) {
  console.log('接收到的', accessKeyId, accessKeySecret)
  var clients = new OSS({
    region: 'oss-cn-beijing', //阿里云oss地区
    accessKeyId, //id
    secure: true,
    accessKeySecret, //密钥
    bucket: 'vue3-sass', //远程仓库名称
  }) //后端提供数据
  console.log('打印返回的client', clients)
  return clients
}

3. 封装全局唯一标识符方法

• utils文件夹下=>创建guid.ts 代码如下

// 生成GUID
export function newGuid() {
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
}

4. 上传图片(直传) (包含上传图片 上传进度 获取文件后缀名方法)

//获取文件后缀名
const getExtension = (file: File) => {
  if (file) {
    // 通过正则表达式提取文件后缀名
    const regex = /(?:\.([^.]+))?$/
    const result = regex.exec(file.name)
    return result?.[1] || null
  }
  return null // 处理输入为 null 的情况
}
//上传图片 普通上传
state.editorConfig.MENU_CONF['uploadImage'] = {
  allowedFileTypes: ['image/*'], //限定上传类型
  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 2 * 1024 * 1024,
  // 超时时间，默认为 10 秒
  timeout: 10 * 1000, // 10 秒
  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 100,
  headers: { Accept: 'text/x-json' },
  // 自定义图片上传
  async customUpload(files: File, insertFn: any) {
    percentage.value = 0
    showPercentage.value = true
    let AccessKeyId = '你的阿里云oss id'
    let AccessKeySecret = '你的阿里云oss 密钥'
    ElMessage({
      message: '开始上传,请等待!',
      type: 'warning',
    })
    const fileGuid = newGuid()
    const fileSuffix = getExtension(files)
    const newFileName = fileGuid + '.' + fileSuffix
    //初始化配置
    let res = await client(AccessKeyId, AccessKeySecret).put(
      newFileName,
      files,
      {
        progress,
        timeout: 120000, //设置超时时间
        headers: {
          'Content-Type': 'image/jpeg',
        },
      }
    )

    console.log('插入图片', res)
    //插入图片 地址
    insertFn(res.res.requestUrls[0])
    ElMessage({
      message: '上传成功!',
      type: 'success',
    })
    setTimeout(() => {
      showPercentage.value = false
    }, 500)
  },
}
//上传进度
const progress = (progress: any, checkpoint: any) => {
  // Object的上传进度。
  console.log('上传进度', progress)
  percentage.value = Number((progress * 100).toFixed(0))
  // 分片上传的断点信息。
  console.log('分片上传的断点信息', checkpoint)
  if (checkpoint && checkpoint.uploadId) {
    checkpoints[checkpoint.uploadId] = checkpoint
    console.log('打印checkpoints', checkpoints)
  }
}

5. 上传视频(分片上传)

//上传视频 分片上传
state.editorConfig.MENU_CONF['uploadVideo'] = {
  allowedFileTypes: ['video/*'],
  maxNumberOfFiles: 1,
  // 超时时间，默认为 10 秒
  timeout: 200 * 1000, // 5 秒
  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 100,
  async customUpload(file: File, insertFn: any) {
    ElMessage({
      message: '开始上传,请等待!',
      type: 'warning',
    })
    percentage.value = 0
    showPercentage.value = true
    console.log('打印insertFn', insertFn)
   	 let AccessKeyId = '你的阿里云oss id'
    let AccessKeySecret = '你的阿里云oss 密钥'
    const fileGuid = newGuid()
    const fileSuffix = getExtension(file)
    const newFileName = fileGuid + '.' + fileSuffix
    let res = await client(AccessKeyId, AccessKeySecret).multipartUpload(
      newFileName,
      file,
      {
        parallel: parallel,
        partSize,
        timeout: 120000, //设置超时时间
        progress,
        headers: {
          'Content-Type': 'video/mp4',
        },
      }
    )
    const parts = res.res.requestUrls[0].split('?')
    if (parts.length > 1) {
      const cleanedString = parts[0]
      insertFn(cleanedString)
    } else {
      insertFn(res.res.requestUrls[0])
    }
    ElMessage({
      message: '上传成功!',
      type: 'success',
    })
    setTimeout(() => {
      showPercentage.value = false
    }, 500)
  },
}