将录制音频上传至MongoDB后，URL显示[object object]问题求助

问题排查 #

• 无效的MIME类型：File构造中type参数写了"audio/wav/ogg"，这是错误格式——MIME类型只能是单一合法值，比如mp3对应audio/mpeg、wav对应audio/wav、ogg对应audio/ogg。错误类型会导致文件存储时Content-Type异常，影响后续读取。
• 返回数据处理错误：uploadFile返回的response.data大概率是包含URL的对象（比如{ url: "xxx" }），但你直接把整个对象赋值给了image，调用时自然会显示[object object]而非实际URL字符串。

修复步骤 #

1. 修正File的MIME类型
   根据实际录制的音频格式修改type参数，示例如下：

onStop = (audioData) => {
  // 按实际录制格式选择对应MIME类型
  const file = new File([audioData], "audiofile.mp3", { type: "audio/mpeg", lastModified: Date.now() });
  this.props.setFile(file);
}

如果是wav格式就用type: "audio/wav"，ogg格式用type: "audio/ogg"。

2. 正确提取返回的URL
   先确认uploadFile接口的返回结构，假设返回数据是{ url: "音频地址" }，则提取url字段赋值：

useEffect(() => {
  const getImage = async () => {
    if(file){
      const data = new FormData();
      data.append("name", file.name);
      data.append("file", file);
      let response = await uploadFile(data);
      // 提取对象中的URL字段，根据实际接口结构调整
      setImage(response.data.url);
      // 不确定结构时可先打印查看：console.log("返回数据：", response.data)
    }
  }
  getImage();
}, [file])

3. 验证MongoDB存储内容
   上传完成后，直接查看MongoDB中的对应文档，确认存储的是音频文件的正确URL或数据引用，而非错误的对象格式。

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