修复上传图片后页面刷新问题
广告
{{v.name}}
📋 原始需求(task.md):
在detail.html中,在上传图片后页面自动刷新,导致笔记保存失败。 不行,页面还是自动刷新 把上传图片的逻辑改为后端接收File对象,返回文件网址,然后在detail.html中通过网址查看图片,避免表单导致的页面刷新问题。 现在后端接收的是File,但前端发送的是表单,把前端改成发送File对象试试。
在detail.html中,在上传图片后页面自动刷新,导致笔记保存失败。 不行,页面还是自动刷新 把上传图片的逻辑改为后端接收File对象,返回文件网址,然后在detail.html中通过网址查看图片,避免表单导致的页面刷新问题。 现在后端接收的是File,但前端发送的是表单,把前端改成发送File对象试试。
在 detail.html 上传图片后,页面会自动刷新,导致正在编辑的笔记保存失败。需要消除上传图片引发的整页刷新。
问题根因
- 上传图片使用的是表单(form)提交,浏览器默认行为会触发整页刷新,导致笔记内容丢失、保存失败。
解决方案
- 后端:改为接收 File 对象,保存后返回文件的网址(URL)。
- 前端:detail.html 通过网址查看图片预览,避免表单提交带来的页面刷新;前端发送 File 对象(而非表单),从而彻底消除自动刷新问题。