Jodit-Angular 编辑器上传截图并自定义带序列号的文件名

Question

在jodit编辑器上粘贴截图，我可以通过自定义的url上传截图，但目前我无法将这些截图的文件名自定义为图片+序列号。

我尝试将以下设置添加到 jodit-editor 配置中，但他们无法解决它：

1.

saveSameFileNameStrategy: 'addNumber'

尝试结果：不行

2.

filesVariableName: function (r) {
   console.log('filesVariableName', r);
   return 'image' + r;
},

尝试结果：不行，会执行但是r始终为0，文件名也没有改变

3.

processFileName: (key, file, name) => {
   console.log('processFileName', key, file, 'image' + name);
   return [key, file, 'image' + name];
},

尝试结果：不行，没有执行该事件

浏览器：Chrome， 操作系统：Windows， “乔迪特”：“3.5.4”， “jodit-角度”：“1.11.1”

Answer 1

prepareData函数可以在文件上传到后端之前更改文件名，如下所示：

{
    uploader: {
        insertImageAsBase64URI: false,
        url: 'Your backend Link',
        prepareData: (formdata) => {
            let file = formdata.getAll("files[0]")[0];
            if (file.name === 'image.png') {
                let sn = 0;
                this.newFiles.forEach((f) => {
                    const num = this.getSerialNumber(f.name);
                    if (Number.isNaN(num) === false && num >= sn) {
                        sn = num + 1;
                    }
                });
                const newFileName = `image${sn}.png`;
                const tmp = file.slice(0, file.size, 'image/png');
                file = new File([tmp], newFileName, { type: "image/png" });
                this.newFiles.push(file);
                formdata.set("files[0]", file, newFileName);
            }
            return formdata;
        },
        process: (resp) => {
            return resp;
        },
        isSuccess: function (resp) {
            return !resp.errorText;
        },
        defaultHandlerSuccess: function (data) {
            const j = this.j || this;
            data.fileList.forEach((element) => {
                if (['.gif', '.png', '.jpg'].some((ext) => element.fileName.endsWith(ext))) {
                    j.s.insertImage('Your image Url/' + element.fileID, null, 800);
                }
            });
        }
    }
}