本文详解如何通过配置 jodit 的 `uploader` 选项，实现将本地图片自动上传至指定后端接口（如 `/files`），并正确插入返回的图片 url 到编辑器中，无需手动处理文件选择与 dom 插入。
Jodit 编辑器内置了灵活的文件上传机制，关键在于正确配置 config.uploader 对象。它接管从用户选择文件、构造请求、发送上传、解析响应到最终插入图片的全流程。你无需重写文件选择逻辑或手动调用 insertImage() —— 只需告诉 Jodit：上传地址在哪、数据怎么打包、成功响应长什么样、图片 URL 在哪取。
以下是完整、可直接集成的 uploader 配置（已适配你的后端要求）：
uploader: {
insertImageAsBase64URI: false, // 禁用 base64，强制走 URL 插入
imagesExtensions: ['jpg', 'jpeg', 'png', 'gif'], // 允许的图片格式
withCredentials: false, // 如需携带 cookie 或 auth header，设为 true
format: 'json', // 告知 Jodit 期望 JSON 响应
method: 'POST',
url: 'http://localhost:3000/files', // 你的后端上传接口
headers: {
// 注意：multipart/form-data 由浏览器自动设置 boundary，此处不要手动指定 Content-Type
},
prepareData: function (data) {
// data 是 FormData 实例；this.file 是用户选中的 File 对象
data.append('file', this.file);
return data;
},
isSuccess: function (resp) {
// 自定义判定逻辑：只要响应体有 data 字段（即字符串 URL），即视为成功
return typeof resp === 'string' || (resp && typeof resp.data === 'string');
},
process: function (resp) {
// 关键：将后端返回的纯字符串 URL 封装为 Jodit 识别的格式
const url = typeof resp === 'string' ? resp : resp.data;
return {
files: [url], // 必须是数组，且第一个元素即为要插入的图片 URL
path: '',
baseurl: '',
error: !url ? 1 : 0,
msg: !url ? 'Upload failed' : ''
};
},
defaultHandlerSuccess: function (data, resp) {
const files = data.files || [];
if (files.length > 0) {
// 插入第一张图片，宽高可选（null 表示保持原始尺寸）
this.selection.insertImage(files[0], null, 250);
}
},
defaultHandlerError: function (resp) {
const msg = typeof resp === 'string' ? resp : (resp.msg || 'Upload error');
this.events.fire('errorPopup', this.i18n(msg));
}
}? 重要注意事项：
- ✅ 后端必须返回纯字符串 URL（如 "https://example.com/uploads/abc.jpg"），或兼容 { "data": "..." } 结构；
- ❌ 不要在 headers 中手动设置 'Content-Type': 'multipart/form-data' —— 浏览器会自动添加带正确 boundary 的头，手动设置会导致请求失败；
- ⚠️ 若后端需要认证（如 Bearer Token），请在 headers 中添加 Authorization 字段，并确保 withCredentials: true（若跨域）；
- ? prepareData 是唯一需要你干预的数据组装环节；process 负责“翻译”响应为 Jodit 内部格式；isSuccess 和 defaultHandlerSuccess 控制流程分支。
将上述 uploader 配置整合进你原有的 config 对象中，替换掉空的 uploader: {}，即可立即生效。用户点击工具栏「图片」按钮或拖拽图片到编辑区时，Jodit 将自动完成上传与插入，体验无缝、专业。
最后提醒：务必在开发环境确认 CORS 配置允许 localhost:3000（前端）访问你的后端服务，否则请求会被浏览器拦截。
