Vditor 富文本的文件/图片上传怎么去做|Vditor 富文本集成使用，以及上传

1.新框架中使用到了富文本Vditor ，但是上传功能不能够使用，提示没有没有配置options.upload.url这个属性

2.废话不多说，直接上代码（组件代码）

<template>
  <div id="vditor" :contentValue="contentValue"></div>
</template>

<script>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
export default {
  name: 'NoticeVditor',
  props: {
    contentValue: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 内容编辑(富文本)
      contentEditor: ''
    }
  },
  mounted () {
    this.contentEditor = new Vditor('vditor', {
      value: this.contentValue ? this.contentValue : '',
      height: 360,
      width: 650,
      toolbarConfig: {
        pin: true
      },
        preview:{
            theme:{
                path: `@components/vditor/dist/css/content-theme`
            }
        },
        toolbar: [
            "emoji",
            "headings",
            "bold",
            "italic",
            "strike",
            "link",
            "|",
            "list",
            "ordered-list",
            "check",
            "outdent",
            "indent",
            "|",
            "quote",
            "line",
            "code",
            "inline-code",
            "insert-before",
            "insert-after",
            "|",
            //"upload",
             "record",
            { //自定义上传
                hotkey: "",
                name: "upload",
                // tipPosition: "s",
                tip: "上传图片/上传文件",
                className: "right",
            },

            "table",
            "|",
            "undo",
            "redo",
            "|",
             "fullscreen",
            "edit-mode",
            {
                name: "more",
                toolbar: [
                    //"both",
                    "code-theme",
                    "content-theme",
                    "export",
                    "outline",
                    "preview",
                    "devtools",
                     "info",
                    "help",
                ],
            },
        ],
        //这里写上传
        upload: {
           // accept: 'image/jpg, image/jpeg, image/png',//规定上传的图片格式
            url: "/api/file/upload",//请求的接口
            multiple: false,
            fieldName: 'file',
            max: 2 * 1024 * 1024,//上传图片的大小
            headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }, //为 FormData 添加额外的参数
            linkToImgUrl: "/api/file/upload",//请求的接口
            filename (name) {
                return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
                    .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
                    .replace("/\\s/g", "");
            },
            validate (files) {
                const isLt2M = files[0].size / 1024 / 1024 < 2
                if (!isLt2M) {
                    this.$message.error('"上传图片大小不能超过 10MB!"')
                }
            },
            //上传图片回显处理
            format (files, responseText) {
                var data = JSON.parse(responseText)

                //上传图片请求状态
                if (data.code == 200) {
                    let succ = {}
                    succ[data.data.name] =  data.data.url
                    console.log("上传文件之后:",files, data,succ);
                    //图片回显
                    return JSON.stringify({
                            msg:'',
                            code:0,
                            data:{
                                errFiles: [],
                                succMap: succ
                            }
                        });
                } else {

                }

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

      console.log("富文本",this.contentEditor);

  },
  created () {},
  methods: {
    clear () {
      this.contentEditor.setValue('')
      this.$emit('mounted')
    },
    setContent (value) {
      this.contentEditor.setValue(value)
    },
    getContent () {
      return this.contentEditor.getValue()
    },
    getHTML () {
        return this.contentEditor.getHTML();      //获取 HTML 内容
    },
    disabled () {
        return this.contentEditor.disabled();     //设置 只读
    },
  }
}
</script>

3.使用代码：

<notice-vditor ref="noticeVditor" @mounted="childrenMounted" :contentValue="form.content" />

import NoticeVditor from './NoticeVditor'

components: {
    NoticeVditor
  },

4.取值

this.form.content = this.$refs.noticeVditor.getContent()

5.赋值

this.$refs.noticeVditor.setContent(this.form.content)

6.只读

this.$refs.noticeVditor.disabled();