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

              <input
                    type='file'
                    onChange={handleUploadImg}
                    style={{display: 'none'}}
                    ref={inputRef}
                    multiple
                    key={Math.random()}
                    accept="image/*"
                />

在这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(<img src=${imgUrl} style="width: 300px;" class="fr-fic fr-dib fr-draggable" />, 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

最后编辑于：2025.01.14 18:36:13