vue中使用wangeditor配置上传图片时this指向问题

<template>
  <div class="app-container">
    <div style="border: 1px solid #ccc;">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
        :mode="mode"
      />
      <Editor
        v-model="html"
        style="height: 500px; overflow-y: hidden;"
        :default-config="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />
    </div>
    <el-button type="primary" style="margin-top:3%;" @click="saveChange">保存修改</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'AboutDetail',
  components: { Editor, Toolbar },
  inject: ['reload'],
  data() {
    return {
      insertImg: [],
      lastImg: [],
      tableData: [],
      id: 0, // 内容的id
      base_url: process.env.VUE_APP_BASE_API,
      Authorization: 'Bearer ' + this.getCookieValue(document.cookie, 'jWTToken'),

      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: { },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: process.env.VUE_APP_BASE_API + 'Management/EditorUploadImg',
            fieldName: 'file',
            maxNumberOfFiles: 1,
            headers: {
              Authorization: 'Bearer ' + this.getCookieValue(document.cookie, 'jWTToken')
            },
            // 自定义插入图片
            customInsert: (res, insertFn) => {
              if (res.code === 200) {
                insertFn(this.base_url + res.url)
                this.insertImg.push(res.url)
                console.log(this.insertImg)
              } else {
                alert(res.msg)
              }
            }
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },

  created() {
    // 请求list
    axios.get(process.env.VUE_APP_BASE_API + 'Management/GetAboutDetail', {
      headers: {
        Authorization: this.Authorization // 替换为你的token
      }
    }).then(response => {
      if (response.data !== null) {
        this.id = response.data[0].id
        this.html = response.data[0].content
      }
      // console.log(response.data)
    })
  },
  // 页面销毁时要销毁编辑器
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  mounted() {
  },
  methods: {
    getCookieValue(cookies, name) {
      const cookieArr = cookies.split(';')
      for (let i = 0; i < cookieArr.length; i++) {
        const cookiePair = cookieArr[i].split('=')
        const cookieKey = cookiePair[0].trim()
        const cookieVal = cookiePair[1].trim()

        if (cookieKey === name) {
          return cookieVal
        }
      }

      return null
    },
    // 创建编辑器
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 上传图片
    upLoadImg(file) {
      axios.post(this.base_url + 'Management/EditorUploadImg', { 'file': file }, {
        headers: {
          Authorization: this.Authorization // 替换为你的token
        }
      }).then(response => {
        if (response.code === 200) {
          this.insertImg.push(response.url)
          // 插入图片
          // 将图片url插入到编辑器中
          this.$refs.editor.txt.insertImage(response.url)
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    // 保存修改
    saveChange() {
      // 获取所有的图片
      var all = this.editor.getElemsByType('image')
      // 获取原来插入的图片
      var insert = this.insertImg
      console.log('insert----' + insert)
      console.log('all----' + all)
    }
  }
}

</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

我需要把上传成功后的图片url 保存到insertImg中，以便于最后在保存时比对前后图片的变化，并将删除的图片从硬盘中删除掉，免得占用资源。

在data下的this指向如果直接使用就会undfined,所有要使用箭头函数来确保this的正确指向

代码如下：

 // 自定义插入图片
            customInsert: (res, insertFn) => {
              if (res.code === 200) {
                insertFn(this.base_url + res.url)
                this.insertImg.push(res.url)
                console.log(this.insertImg)
              } else {
                alert(res.msg)
              }
            }

这样就确保了this的正确指向。

如果你也遇到同样的问题，该方法对你有用记得点赞哦。