draft-editor实现粘贴上传图片

最新推荐文章于 2025-12-05 11:49:53 发布

原创最新推荐文章于 2025-12-05 11:49:53 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #draft-editor

其他专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在braft-editor中实现媒体文件的上传功能，包括设置上传路径、使用XMLHttpRequest进行文件上传、监听上传进度及错误处理等关键步骤。通过具体代码示例，展示了如何将上传成功的文件地址返回给编辑器。

1、braft-editor中实现粘贴实现路径上传，需要编辑媒体的功能的上传，就行了。

myUploadFn = (param) => {
        console.log(param);

        const serverURL = `${config.baseUrl}api/AdminSite/Article/UploadImage`; //上传的路径
        const xhr = new XMLHttpRequest;
        const fd = new FormData();

        const successFn = (response) => {
            console.log(response, JSON.parse(xhr.responseText).data[0]);
            // 假设服务端直接返回文件上传后的地址
            // 上传成功后调用param.success并传入上传后的文件地址
            param.success({
                url: JSON.parse(xhr.responseText).data[0],
                meta: {
                    id: 'xxx',
                    title: 'xxx',
                    alt: 'xxx',
                    loop: true, // 指定音视频是否循环播放
                    autoPlay: true, // 指定音视频是否自动播放
                    controls: true, // 指定音视频是否显示控制栏
                    poster: 'http://xxx/xx.png', // 指定视频播放器的封面
                }
            })
        };

        const progressFn = (event) => {
            // 上传进度发生变化时调用param.progress
            param.progress(event.loaded / event.total * 100)
        };

        const errorFn = (response) => {
            // 上传发生错误时调用param.error
            param.error({
                msg: 'unable to upload.'
            })
        };

        xhr.upload.addEventListener("progress", progressFn, false);
        xhr.addEventListener("load", successFn, false);
        xhr.addEventListener("error", errorFn, false);
        xhr.addEventListener("abort", errorFn, false);

        fd.append('file', param.file);
        xhr.open('POST', serverURL, true);
        xhr.setRequestHeader("Authorization", "bearer " + this.authorization);
        xhr.send(fd)

    };
    
     <BraftEditor placeholder="shift+enter实现换行效果"
                                                 excludeControls={excludeControls}
                                                 value={editorState}
                                        // converts={{unitImportFn, unitExportFn}}
                                                 media={{uploadFn: this.myUploadFn}}
                                                 extendControls={extendControls}
                                                 onBlur={this.handleContentChange}
                                    />

https://blog.youkuaiyun.com/zuggs_/article/details/80747438