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

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', `<img src=${res.data.data.filename} alt="">`)
          return res.data
        } else {
        }
      }).catch(err => {
        console.log(1111,err)
      })
    }).catch(err => {})
  })
}

创建wangEditor.vue组件

<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>
<script>

  import E from 'wangeditor'
  import { ossUpload } from '@/api/oss'
  export default {
    name: 'editor',
    data() {
      return {
        // uploadPath,
        editor: null,
        info_: null,
          menus: [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo', // 重复
          'fullscreen' // 全屏
                ]
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''

      },
      isClear: {
        type: Boolean,
        default: false
      }

    },
    watch: {
      isClear(val) {
        // 触发清除文本域内容
        if (val) {
          this.editor.txt.clear()
          this.info_ = null
        }
      },
      value: function(value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value)
        }

      }
      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    },
    mounted() {
      this.seteditor()
      this.editor.txt.html(this.value)
    },
    methods: {
      seteditor() {
        this.editor = new E(this.$refs.toolbar, this.$refs.editor);
        this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config;
        this.editor.customConfig.customUploadImg = async (files, insert) => {
                  const res = await ossUpload(files[0],this.editor)
                }

        this.editor.customConfig.menus = this.menus;
      //连接
      this.editor.customConfig.linkCheck = function (text, link) {
          console.log("插入的文字",text) // 插入的文字
          console.log("插入的链接",link) // 插入的链接
          return true // 返回 true 表示校验成功
      },
        this.editor.customConfig.onchange = (html) => {
          this.info_ = html // 绑定当前逐渐地值
          this.$emit('change', this.info_) // 将内容同步到父组件中
        }
        // 创建富文本编辑器
        this.editor.create()
      }

    }

  }

</script>
<style lang="css">
  .editor {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;

  }
  .toolbar {

    border: 1px solid #ccc;

  }

  .text {
    border: 1px solid #ccc;
    min-height: 500px;
  }
</style>

效果：

2.上传本地视频至oss

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

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

<template>
  <div style="display: inline-flex;">
    <div class="img-list-item common mb_10" v-for="(item,index) in dialogImageUrl">
      <video width="150px" height="150px" style="padding: 0 5px;" controls="controls" :src="item"> 您的浏览器不支持视频播放</video>
      <i class="del-img" @click="forkImage(index)"></i>
    </div>
    <el-upload action=""
              :data="dataObj" :show-file-list="false"
              :auto-upload="true"
              :on-remove="handleRemove"
              :on-success="handleUploadSuccess"
              :before-upload="beforeUpload"
              :limit="maxCount"
              accept=".mp4"
              :on-exceed="handleExceed"
              :on-progress="uploadVideoProcess">
      <span class="warp">
        <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;position: relative;top: -15px;">
        </el-progress>
        <i v-else class="el-icon-plus" :style="{fontSize: '18px',fontWeight:'bold',padding:paddings,position:'relative',top:'60px'}"></i>
      </span>
    </el-upload>

  </div>
</template>
<script>
  import {
    policy1
  } from '@/api/oss'
  export default {
    props: {
      value: Arry,
      //最大上传图片数量
      maxCount: {
        type: Number,
        default: 5
      },

      w: {
        type: String,

        // default:'100px'
      },
      h: {
        type: String,
        // default:'100px'
      },
      paddings: {
        type: String,
      }
    },
    data: function() {
      return {
        videoFlag: false,
        videoUploadPercent: 0,
        videis: false,
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        },
        dialogVisible: false,
        dialogImageUrl: []
      }

    },

    computed: {
      fileList() {
        let fileList = [];
        for (let i = 0; i < this.value.length; i++) {
          fileList.push({
            url: this.value[i]
          });

        }
        console.log('视频---->', fileList);
        console.log('视频22222222222222---->', this.dialogImageUrl);
        return fileList;

      }
    },
    methods: {

      //删除视频
      forkImage(index) {
        // console.log('当前索引', index);
        this.dialogImageUrl.splice(index, 1);
        // console.log('删除后的数组数组', this.dialogImageUrl);
      },
      getUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
          return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
        })
      },
      emitInput(fileList) {
        let value = [];
        for (let i = 0; i < fileList.length; i++) {
          value.push(fileList[i].url);
        }
        this.$emit('input', value)
      },
      handleRemove(file, fileList) {
        this.emitInput(fileList)
      },

      handleUploadSuccess(res, file) {
        // console.log("成功后", file)
        // console.log('获取图片', res.data);
        let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
        // console.log('路径', url);
        this.fileList.push({
          name: file.name,
          url: url
        });
        this.dialogVisible = true;
        this.dialogImageUrl.push(url);
        // console.log("视频地址", this.);
        this.emitInput(this.fileList);
        this.videoFlag = false;
        this.videoUploadPercent = 0;
      },

      uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = Math.floor(event.percent);
      },
      beforeUpload(file) {
        var fileSize = file.size / 1024 / 1024 < 100;
        console.log('视频大小', fileSize);
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) ==

          -1) {
          this.$message({
            type: 'warning',
            message: '请上传正确的视频格式'
          });
          return false;
        }
        if (!fileSize) {
          this.$message({
            type: 'warning',
            message: '视频大小不能超过100MB'
          });
          return false;
        }

        this.videoFlag = true;
        console.log("上传视频值", file);
        const _self = this
        return new Promise((resolve, reject) => {
          policy1().then(response => {
            console.log("视频---->获取数据", response.data);
            _self.dataObj.policy = response.data.policy;
            // console.log('policy值',response.data.policy);
            _self.dataObj.signature = response.data.signature;
            // console.log('signature值',response.data.signature);
            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
            // console.log('ossaccessKeyId值',response.data.accessKeyId);
            _self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
            console.log('视频---->key值', response.data.dir + this.getUUID() + '_${filename}');
            _self.dataObj.dir = response.data.dir;
            console.log('视频---->dir值', response.data.dir);
            _self.dataObj.host = response.data.host;
            _self.dataObj.callback = response.data.callback;
            resolve(true)
          }).catch(err => {
            console.log(err)
            reject(false)

          })

        })

      },
      handlePreview(file) {
        // console.log('获取视频', file.url);
        this.dialogVisible = true;
        this.dialogImageUrl = file.url;
      },

      handleExceed(files, fileList) {
        // console.log("获取上传视频", files, fileList);
        this.$message({
          message: '最多只能上传' + this.maxCount + '个视频',
          type: 'warning',
          duration: 1000
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
  .warp {
    display: inline-block;
    // padding: 54px 64px;
    width: 150px;
    height: 151px;
    border: 1px dashed #DEE5ED;
  }
  /deep/.el-upload-list {
    display: none;
  }
  .el-upload-video {
    width: 149px;
    height: 149px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload-video-i {
    font-size: 20px;
    font-weight: bold;
    padding-top: 43px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  //视频
  .img-list-item {
    position: relative;
    margin: auto;
  }
  // .img-list-item img {
  //  box-sizing: border-box;
  //  vertical-align: middle;
  //  border: 0;
  // }
  .img-list-item i.del-img {
    width: 20px;
    height： 20px;
    display: inline-block;
    background: rgba(0, 0, 0, .6);
    background-image: url(../assets/images/close.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    top: 0;
    right: -1px;
  }

</style>

3.页面调用

<editor-bar v-model="detail" :isClear="isClear" ></editor-bar>

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（研究了很多天，只记得这一个网址了，有原创若看到，可以私聊我哟,转发请注明原创）

本文地址：https://blog.csdn.net/oneya1/article/details/112586077