Recorder.js+Django录音应用：数据库存.336Z而非WAV文件原因？

问题的核心原因出在前端JavaScript的文件名拼接错误，导致传递给服务器的文件名异常，最终在数据库中显示为.336Z格式。

具体错误点 #

在你的app.js上传逻辑中，这一行代码存在语法错误：

fd.append("audio_data",blob, filename.wav);

这里的filename是通过new Date().toISOString()生成的字符串，格式类似2024-05-20T12:34:56.336Z。你试图用filename.wav的方式添加后缀，但JavaScript中字符串没有wav属性，这会返回undefined。当FormData的文件名参数为undefined时，浏览器会异常解析原日期字符串，最终将.336Z作为文件后缀传递给服务器。

修复方法 #

修改前端的文件名拼接逻辑，正确添加.wav后缀：

upload.addEventListener("click", function(event){
      var xhr=new XMLHttpRequest();
      xhr.onload=function(e) {
          if(this.readyState === 4) {
              console.log("Server returned: ",e.target.responseText);
          }
      };
      var fd=new FormData();
      // 修正：用字符串拼接方式添加.wav后缀
      fd.append("audio_data", blob, filename + ".wav");
      xhr.open("POST","/save-audio/",true);
      xhr.send(fd);
})

额外优化建议 #

由于ISO格式的日期字符串包含冒号、Z等字符，部分文件系统不支持这些字符作为文件名，建议对文件名做清理：

// 生成合法文件名，替换掉不允许的字符
var filename = new Date().toISOString().replace(/[:.]/g, '-').replace('Z', '');

验证说明 #

Django的FileField不会主动修改文件后缀，问题完全源于前端传递的文件名错误。修正后，服务器会接收到带.wav后缀的音频文件，数据库中也会正常显示WAV格式。

内容的提问来源于stack exchange，提问作者lilsnow02