解决图片上传问题
先从一张小的 PNG 开始。打开浏览器的网络面板,插入图片,然后跟踪请求从上传到保存文档的全过程。请在测试文档中操作,不要使用客户的草稿。
初次设置:决定图片存放在哪里
编辑器负责插入内容;您的应用负责存储上传的文件。请选择一个持久的文件夹或对象存储,配置上传端点,并返回一个浏览器可以访问的图片 URL。服务器磁盘路径不是图片 URL。
- 从可运行的对应服务器语言的演示开始。
- 使用与您所安装版本对应文档中的上传 URL 或自定义处理程序。不要注册相互冲突的处理程序。
- 如果您的应用要求上传图片,请按照文件存储设置禁用 Base64 嵌入。
- 分别以插入、粘贴和拖放的方式添加图片。保存、重新加载,然后在读者查看文档的环境中打开保存的图片 URL。
找到您的症状
没有出现上传请求
检查控制台中是否有初始化错误,并确认处理程序脚本在编辑器使用它之前已经加载。如果 HTML 中包含 data:image/ 源,说明图片是被嵌入而不是上传的。请检查实际生效的编辑器配置,而不只是您打算部署的那个文件。
401 或 403:请求被拒绝
检查身份验证、CSRF 验证和文件夹授权。以状态码 200 返回的登录页面同样意味着上传失败。对于跨源上传,请检查两个源上的 Cookie 和 CORS 配置。请保持访问检查处于启用状态;使用您应用中经过身份验证的上传流程。
413:文件过大
检查反向代理、Web 服务器、框架的 multipart 限制和应用自身的限制。最小的那个限制起作用。请分别用略低于和略高于预期限制的文件进行测试。浏览器端缩放可以减小照片的大小,但服务器端的限制仍然必须保护端点。
返回 200,但没有图片
检查响应体和内容类型。它必须符合受支持的响应格式,而不是一条成功消息、HTML 错误页面或文件系统路径。对于自定义处理程序,请以保存后的 URL 或错误调用一次它的完成回调。
上传成功,但图片 URL 返回 404
直接打开返回的 URL。检查公开 URL 前缀、虚拟目录、区分大小写的文件名、静态文件提供和持久存储。相对 URL 在发布后的页面上可能解析到不同的路径下。请分别在编辑器页面和读者页面上测试该 URL。
重启或部署后图片消失
检查上传文件是否被写入了临时目录或会被替换的应用目录。请使用持久存储,并将其纳入您的备份策略。部署不应当用演示包中的文件替换用户上传的文件。
检查保存的文档,而不只是预览
预览可能在上传完成之前就已显示。请查看提交的 HTML、存储的值以及重新加载后返回的 HTML,确认图片指向其最终 URL。未解析的 blob: URL 只属于某个浏览器会话,并不是持久存储。
如果图片在编辑器中正常,但保存后消失,请检查提交的时机、服务器验证,以及 HTML 净化程序对图片的策略。不要为了让图片显示而禁用净化。请参阅保存带图片的富文本。
生产环境检查
- 在服务器上验证文件类型、解码后的尺寸和大小。
- 由服务器生成存储名称;不要信任上传的路径或文件名。
- 对上传和图片库访问应用按用户或按租户的权限。
- 私有图片应通过授权的方式提供;即使编辑器页面需要登录,公开的 URL 也仍然是公开的。
- 除了成功的情况,还要测试拒绝、取消和慢速连接。
需要提供给技术支持的信息
请提供编辑器版本、框架、最小配置、失败的操作、HTTP 状态码以及经过脱敏的响应。说明问题发生在上传之前、插入之后,还是保存并重新加载之后。分享日志之前,请删除 Cookie、令牌、私有图片 URL 和客户内容。
服务器端示例:ASP.NET Core、Web Forms 和 MVC、PHP。也可以试试拖放图片演示。