作为一名前端开发，本前端仔日常负责公司的小程序端、桌面端及后台网页端等多个平台。在这些不同端的开发过程中，文件的上传、保存等交互操作总是绕不开的话题，而我也确实踩了不少坑。
因此，希望通过这篇文章总结一些经验，也帮助大家尽量避开这些“雷区”。
1. 永远不要相信用户端的文件名——这里的坑比你想象中要多
在我处理文件相关逻辑时，最深刻的教训之一就是：永远不要直接使用客户端传来的文件名。
下面分享两个真实踩坑经历：
微信小程序中的“奇葩”Bug：
我们的小程序使用 wx.chooseMessageFile 接口，让用户从聊天会话中选择文件，之后我们会处理这些文件并保存到本地。结果最近接连遇到两个问题：
- 在 vivo 手机上，接口返回的图片文件名中竟然包含
//，例如SERVERID://123xxxx。由于我最初是直接用这个文件名作为保存路径，结果系统把//识别为路径分隔符，导致文件保存路径错误。 - 在 华为鸿蒙 5.1 系统中，返回的文件名居然是空字符串！你没看错，就是空字符串。这直接导致多个文件在保存时指向同一个路径，造成文件被覆盖。
由于我没有vivo手机和华为纯血鸿蒙手机，上述的bug排查是从日志中发现的，评论区有木有小伙伴现身说法一下的，是不是也遇到这个问题。
经验总结：
- 文件名中可能含有非法字符（如
/、`` 等），直接使用会导致路径解析错误。 - 文件名也可能为空或重复，造成文件被意外覆盖。
- 最佳做法：保存文件时，不要使用原始文件名作为存储路径。建议使用随机生成的字符串（如 UUID）作为文件名，同时将原始文件名保存在另一个变量中，用于界面展示。这样既安全又不影响用户体验。
2. 上传时，客户端的时间是不可靠的
文件上传时我们常常会用到与时间相关的参数，比如生成签名或密钥。然而，客户端的时间是不可信的。用户可能修改了系统时间，造成与服务器时间有较大偏差，从而导致签名错误、上传失败。
如果后端支持，最佳方案是请后端提供一个接收文件上传的接口，由后端生成签名或处理时间相关逻辑。如果后端不方便配合，那前端就必须通过接口获取服务器时间，确保时间参数的准确性。
希望这些总结能对大家有所启发。如果你也在文件处理中踩过类似的坑，欢迎一起交流讨论。
