wangEditor上传本地视频/本地图片至阿里云oss并回显

1.上传本地图片至oss并且回显至富文本

先创建oss.js上传/图片/视频接口

import request from '@/utils/re.js'   //封装的请求

import axios from 'axios'

export function policy1() {

  return request({

    url:'url',//上传接口

    method:'get',

  })

}

export function getUUID () {

return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {

  return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)

})

}

export function ossUpload (file,editor) {

  var that = this;

  return new Promise((resolve, reject) => {

      policy1().then((response) => {

      const formData = new FormData()

      formData.append('OSSAccessKeyId', response.data.accessKeyId)

      formData.append('policy', response.data.policy)

      formData.append('signature', response.data.signature)

      formData.append('key', response.data.dir +getUUID() +'_'+ file.name)

      formData.append('callback', response.data.callback)

      formData.append('file', file)

      formData.append('host',response.data.host)

      axios.post(response.data.host, formData).then((res) => {

        const { status } = res

        if (status === 200) {

          console.log('200',res)

            editor.cmd.do('insertHTML', ``)

          return res.data

        } else {

        }

      }).catch(err => {

        console.log(1111,err)

      })

    }).catch(err => {})

  })

}

创建wangEditor.vue组件

效果：

2.上传本地视频至oss

因为wangEditor本身只能通过链接插入视频，不能实现上传本地视频，所以我总结多方网络经验，自己手扣了一个（就是通过ElementUI上传组件实现，拿到最终图片路径后再放进富文本,思路大概就是这样。但是插入的视频不能改变大小，如果有实现的小伙伴，就麻烦给我指点一下哈哈哈）

新建组件wangEndtorArticle.vue：（该组件功能比较完整，包括上面的上传图片）

3.页面调用

import EditorBar from '../../../components/wangEndtorArticle.vue'   //引入组件

export default {

    components: {

      EditorBar   //注册组件

    },

    data() {

      return {

               detail:"   "  //存放富文本内容

               }

}

}

效果：

查看了很多资料，有些忘记保存                      请看过的小伙伴们留个赞哟（前端小白请各位大佬多多指教）！！！！

https://blog.csdn.net/weixin_45455422/article/details/106380143?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-9.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-9.control