@wangeditor/editor添加上传附件

最新推荐文章于 2024-06-02 13:52:00 发布

print_my

最新推荐文章于 2024-06-02 13:52:00 发布

阅读量770

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/print_my/article/details/138130886

版权

 toolbarConfig.insertKeys = {
      index: toolbarConfig?.toolbarKeys?.length + 1, // 自定义插入的位置
      keys: ['uploadAttachment'], // “上传附件”菜单
    }
    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {
        // TS 语法
        placeholder: '请输入...',
        ...editorConfigProp,
        hoverbarKeys: {
          attachment: {
            menuKeys: ['downloadAttachment'], // “下载附件”菜单
          },
        },
        MENU_CONF: {
            // “上传附件”菜单的配置
            uploadAttachment: {
                server: "...", // 服务端地址
                timeout: 5 * 1000, // 5 秒
                fieldName: "file",
                maxFileSize: 20 * 1024 * 1024, // 20M
                headers: {Authorization: `Bearer ${getToken()}`},

                onBeforeUpload(file: File) {
                    console.log('onBeforeUpload', file)
                    return file // 上传 file 文件
                    // return false // 会阻止上传
                },
                customInsert(res: any, file: File, insertFn: Function) {
                    console.log('customInsert', res)
                    const {url} = res.data || {}
                    if (!url) throw new Error(`url is empty`)

                    // 插入附件到编辑器
                    insertFn(file.name, url)
                },
                onProgress(progress: number) {
                    console.log('onProgress', progress)
                },
                onSuccess(file: File, res: any) {
                    console.log('onSuccess', file, res)
                },
                onFailed(file: File, res: any) {
                    alert(res.message)
                    console.log('onFailed', file, res)
                },
                onError(file: File, err: Error, res: any) {
                    alert(err.message)
                    console.error('onError', file, err, res)
                },
            },
            //上传图片
            uploadImage: {
                server: "/api/basic/upload", // 服务端地址
                // 超时时间，默认为 10 秒
                timeout: 5 * 1000, // 5 秒
                fieldName: "file",
                maxFileSize: 20 * 1024 * 1024, // 20M
                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,

                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ["image/*"],
                headers: {
                    Accept: "application/json, text/plain, */*",
                    Authorization: "Bearer " + getToken(),
                },
                // 上传之前触发
                onBeforeUpload(file: any) {

                    // file 选中的文件，格式如 { key: file }
                    return file;
                },
                customInsert(res: any, insertFn: any) {
                    // res 即服务端的返回结果

                    if (res.code == 200) {
                        const {data} = res;
                        // 从 res 中找到 url alt href ，然后插图图片
                        insertFn(data.url, "", "");
                    }
                },
            },
        }
    };
    useEffect(() => {
        if (editor && defaultBlur) {
            editor.blur();
        }
        return () => {
            if (editor === null) return;
            editor.destroy();
            setEditor(null);
        };
    }, [editor]);