我在 nuxt 中集成非 Markdown 富文本编辑 element-tiptap 上传图片到服务器的问题到现在还没解决, 有人指导一下吗?

Question

代码仓库地址: GitHub - Leecason/element-tiptap: 🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js 🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js - GitHub - Leecason/element-tiptap: 🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js https://github.com/Leecason/element-tiptap

问题描述:

上传图片的接口在  methods 中可以使用.
但 element-tiptap 上传图片的方法在 data 中服务接口方法没定义. Nuxt 中,我以插件的方式导入文本编辑器,渲染没问题.

```javascript
  data() {
    return {
        .....
        new Image({  // 在这里上传 接口方法没定义
          uploadRequest(file) {
            console.log('file', file)
            const data = new FormData()
            data.append('image', file)
            console.log('data', data)
            return $uploadArticleImg(data).then(response => {
              return response.data.data.url
            })
          }
        }),
      ....
  methods: {
    /**
     * 在这里上传图片到服务器,是成功的
     */
    uploadUserPhoto(file) {
      const data = new FormData()
      // console.log('file', file)
      data.append('file', file.file)
      this.$uploadUserPhoto(data).then(response => {
        if (response.code == 20000) {
          // 删除原图片,调用下面的方法
          this.deleteImg()
          // 上传成功,将OSS里的图片地址赋值给属性 coverUrl 回显,属性要先定义,否则无法回显
          this.formData.coverUrl = response.data
        }
      }).catch(() => {
        this.$message.error('上传图片失败')
      })
    },

Answer 1

如果能帮忙解决问题,可以付费.