wangEditor 自定义上传图片

//需要项目后台提供上传接口uploadFile  

下载接口FILE_URLObject.defineProperties(Vue.prototype, {
  FILE_URL: {
    value: function (fileId) {
      if (!fileId) {
        return
      }
      return (
        process.env.VUE_APP_REMOTE_URL +
        'mi' +
        '/api/v1/file/download' +
        toQueryString({ token: getToken(), fileId })
      )
    },
  },
})

---------------------------------------------------------------------------------------
this.editor = new E('#editor')
const this_ = this
// 自定义上传图片
this.editor.config.customUploadImg = async function (
  resultFiles,
  insertImgFn,
) {
  // resultFiles 是 input 中选中的文件列表
  // insertImgFn 是获取图片 url 后,插入到编辑器的方法
  const promises = resultFiles.map(file => {
    const formData = new FormData()
    formData.append('file', file)
    return uploadFile(formData)
  })
  const imgIds = await Promise.all(promises)
  const urls = imgIds.map(v => this_.FILE_URL(v))
  urls.forEach(v => {
    this_.editor.cmd.do(
      'insertHtml',
      '<img src="' + v + '" style="width:100%"/>',
    )
  })
}
this.editor.create()
this.editor.txt.html('') //设置内容

 

posted @   丶乔  阅读(122)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
点击右上角即可分享
微信分享提示