富文本wang-editor自定义上传

const editorConfig: Partial<IEditorConfig> = {
    placeholder: "请输入内容...",
    MENU_CONF: {
      uploadImage: {
        server: "/api/upload",//无意义
        base64LimitSize: 5 * 1024, // 5kb 直接转成base64
        // maxFileSize: 1 * 1024, // 1M

        // // 最多可上传几个文件，默认为 100
        // maxNumberOfFiles: 1,

        // 自定义上传
        async customUpload(file: File, insertFn: InsertFnType) {
          // 自己实现上传，并得到图片 url alt href
          // 最后插入图片
          if (!(file.type === "image/jpeg" || file.type === "image/png")) {
            message.warning("该图片格式不符合要求！");
            return;
          }
          if (file.size > 1024 * 1024 * 20) {
            message.warning("图片大小不能超过20M！");
            return;
          }
          let formData = new FormData();
          formData.append("fileList", file);
          const res = await upLoadRich(formData);//调用后端上传接口
          if (res[0]) {
            insertFn(res[0].fileUrl, res[0].fileName, res[0].fileUrl);
          }
        },
      },
      uploadVideo: {
        server: "/api/upload",
        // 单个文件的最大体积限制，默认为 10M
        // maxFileSize: 200 * 1024 * 1024, // 5M
        // 自定义上传
        async customUpload(
          file: File,
          insertFn: (url: string, poster: string) => void
        ) {
          if (file.type !== "video/mp4") {
            message.warning("请上传mp4格式视频！");
            return;
          }
          let formData = new FormData();
          formData.append("fileList", file);
          const res = await upLoadRich(formData);
          if (res[0]) {
            insertFn(res[0].fileUrl, "");
          }
        },
      },
    },
  };

最后

以上就是可耐咖啡为你收集整理的富文本wang-editor自定义上传的全部内容，希望文章能够帮你解决富文本wang-editor自定义上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。