vditor图片上传和图片回显功能具体实现

1、自定义图片上传

配置option中的upload项

   upload: {
      accept: "image/*", // 图片类型
      fieldName: "file",
      filename(name) {
        // 过滤特殊字符
        return name
          .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
          .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, "")
          .replace("/\\s/g", "");
      },
      max: 20 * 1024 * 1024,
      multiple: false,
      withCredentials: false,
      // 图片上传校验，可以校验图片大小及类型
      validate(files) {
        const isLt2M = files[0].size / 1024 / 1024 < 20;
        if (!isLt2M) {
          message("上传图片大小不能超过 20MB!", { type: "error" });
          return false;
        }
        if (!files[0].type.includes("image")) {
          message("仅支持上传图片！", { type: "error" });
          return false;
        }
        return true;
      },
      async handler(files) {
        let res;
        for (const file of files) {
          const name = file.name;
          res = await uploadImage(file);
          editor.value?.insertValue(`![${name}](${baseUploadApi(res.data)})`); // 文本编辑器中插入图片
        }
        if (res.data) {
          return "上传成功";
        }
        return "上传失败";
      },
      success(data) {
        console.log(data, "success");
      }
    },

2、预览插件中配置图片回显

注意不要配置图片懒加载

const defaultOptions = {
  cdn: "https://ld246.com/js/lib/vditor",
  mode: "dark",
  anchor: 1,
  hljs: {
    lineNumber: true,
    style: "github"
  },
  math: {
    inlineDigit: true,
    macros: {}
  },
  theme: {
    current: "dark"
  }
  // lazyLoadImage: "//unpkg.com/vditor/dist/images/img-loading.svg"
};

预览插件的代码在之前博客中有

vue3实现markdown预览和编辑-CSDN博客