Froala-editor 批量上传图片,文件

问题:需求明确需要支持批量上传
解决:
1.图片上传是需要上传到百度的bos上,所以一定是自定义上传,不可能要求后端适配你的方法,所以编辑器自带的上传不能用。
2.尝试使用beforeupload,这个事件,在这里面自定义上传,然后发现,这个编辑器会自动给你转成base64的图片地址,他会自己先写进去(无法禁止),然后我们只能上传成功后,用image.insert 去替换这个图片,体验很不好,成功是能成功,但是体验不友好,如果上传失败,他就自动转成base64的,这个地址就会超长。
3.自己手写一个上传按钮嵌入进去,点击的时候调用自己的方法,上传成功后手动插入到文章里面;

方法3过程:

    let inputRef = useRef();
    let froalaEditorRef;
    FroalaEditor.DefineIcon('uploadImg', {NAME: 'plus', SVG_KEY: 'add'});
    FroalaEditor.RegisterCommand('uploadImg', {
        title: '上传图片',
        focus: false,
        undo: false,
        refreshAfterCallback: false,
        callback: function () {
            inputRef.current.click();
            froalaEditorRef = this;
        }
    });

先定义一个图标,再注册图标的功能,再把这个图标放入到toolbar上(初始化的配置里面配),这个callback,只能是function(){},不能是箭头函数,因为涉及到this,this能指到这个富文本编辑器的实例,然后在render层放一个隐藏的input,用于触发文件选择,这里赋上ref和multiple

              

在这uploadImg点击的时候,就触发它的callback,通过我们写的callback,我们触发了那个隐藏的input 的文件选择,并且同时把该作用域内的this,赋值到外面
等我们选择好文件后

const handleUploadImg = e => {
        setLoading(true);
        imgUpload(e.target.files, froalaEditorRef).finally(() => {
            setLoading(false);
        });
    };

我们给input的onChange加入了handleUploadImg方法,能取到选择的文件流数组,即e.target.files,同时把froalaEditorRef,也一起传过去,这里有个坑,input type=“file”的时候,如果第一次选择了后,第二次又选择一样的文件,他是不会触发onChange的,本来的解法是,每次上传后我把这个隐藏的input的value置为null就可以了,但是在无状态组件种用ref,好像每次都不是同一个ref了。所以我给这个input加了个key={Math.random()},解决这个onChange只触发一次的问题

然后在imgUpload方法里,自己手动并发Promise.all 处理批量上传,这样处理一下能得到一个按照原本文件顺序的图片地址数组,

这里还有个坑;如果循环该数组,用image.insert插入的话,只有第一张是在原来光标位置的,从第二张开始,焦点就会跳到文章头部,然后之后的图片都会插入到文章头部取,
所以这里不要用image.insert插入,用 froalaEditorRef.html.insert(, true);
使用html.insert而不是image.insert。

用直接的for循环插入,因为forEach好像并不是按照顺序执行的,我怕他插入的顺序不对,不敢用forEach


使用的版本是
"froala-editor": "3.1.1",
"react-froala-wysiwyg": "3.1.1",

node v14.6.0
npm 6.14.6

你可能感兴趣的:(Froala-editor 批量上传图片,文件)