vditor编辑器上传视频方法详解

此文章主要讲编辑器上传视频的方法，若想了解vditor更多更详细的使用方法可以参考vue中使用vditor（发布，编辑，详情回显、上传图片+粘贴图片回显问题，表情的处理）

1.html

<div id="markdownContent"></div>

2.demo

toolbar: [
	{
       hotkey: "",
       name: "upload",
       tip: "上传图片或视频",
       className: "right",
     },
]

//这里写上传图片或视频
upload: {
  accept: 'image/jpg, image/jpeg, image/png, image/gif, .mp4',
  token: this.token,
  url: this.gb.reqPath('/v1/Upload/upload'),
  multiple: false,
  fieldName: 'file',
  max: 50 * 1024 * 1024,
  extraData: {'access_token': this.token}, //为 FormData 添加额外的参数
  linkToImgUrl: this.gb.reqPath('/v1/Upload/uploadUrl'),
  filename(name) {
    return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
      .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
      .replace("/\\s/g", "");
  },
  linkToImgFormat(files) {
    let code = 0
    let msg = ''
    let data = JSON.parse(files)
    // //上传图片请求状态
    if (data.ret_code == 200) {
      let responseData = self.gb.imgOutLinkPath(data.result.path)
      let succUrl = {}
      let originalURL = 'originalURL'
      let url = 'url'
      succUrl[originalURL] = data.result.originalURL
      succUrl[url] = responseData
      let end = JSON.stringify({
        msg,
        code,
        data: succUrl
      })
      return end
    }
    setTimeout(() => {
      self.outLinkImgFun();
    }, 3000);
  },
  format(files, responseText) {
    // let imageResult = JSON.parse(responseText)
    let code = JSON.parse(responseText)
    let msg = JSON.parse(responseText)
    let data = JSON.parse(responseText)
    let filName = data.result.image_url
    //上传文件请求状态
    if (data.ret_code == 200) {
      let lastTipNum = filName.substr(filName.lastIndexOf('/', filName.lastIndexOf('/') - 1) + 1);
      let index = lastTipNum.lastIndexOf("\/");
      self.imgNameStr = decodeURI(lastTipNum.substring(index + 1, lastTipNum.length));
      let responseData = self.gb.imgPath(data.result.image_url)
      let succ = {}
      succ[self.imgNameStr] = responseData
      //文件回显
      return JSON.stringify({
        msg,
        code,
        data: {
          errFiles: [],
          succMap: succ
        }
      })
    } else {
      if(msg.ret_code == 20602503) {
        self.$message({
          message: msg.ret_msg+'（图片不大于2M，视频不大于50M）',
          type: 'error'
        })
      }
    }

  },
  error(msg) {
    console.log(msg + "上传失败了")
  },
}

3感受

用这款编辑器到现在，有以下两点感受

1.文档：
若你的项目无特殊要求，则官方文档就足够了；若你的项目有特殊要求，如我的项目有复制粘贴外链图片，同时需要处理没有权限粘贴的图片，或者判断文章内容点击的链接是否是外部链接，若是外部链接进行特殊处理等特殊要求，文档没有帮助，需要自己花时间去翻帖子

2.功能交互
太依赖后端了，好多前端可以处理的事情，需要后端去进行处理