Laravel后端+Axios前端实现图片/PDF下载提示格式不支持如何解决

• 后端逻辑错误：当前接口仅返回JSON格式的预约记录元数据，没有读取public目录下的实际文件返回二进制流，前端请求得到的是JSON字符串转成的Blob，格式完全不匹配，因此触发「不支持该格式」报错
• 前端逻辑错误：
  1. Accept请求头写死为application/pdf，无法兼容图片、DOCX等其他格式的文件请求
  2. 下载文件名从res.data.file取值，但你设置了responseType: "blob"，响应体是二进制流而非JSON结构，根本读取不到该字段
  3. 创建Blob对象时未指定对应文件的MIME类型，会导致浏览器无法正确识别文件格式

后端修改（Laravel框架示例） #

将接口改为直接返回文件流，不要返回JSON数据：

public function myAppointment($id)
{
    $appointment = Appointment::findOrFail($id);
    // 假设你表中存储的file_path字段是文件在public目录下的相对路径，比如 uploads/xxx.pdf
    $filePath = public_path($appointment->file_path);
    if (!file_exists($filePath)) {
        abort(404, '文件不存在');
    }
    // 直接返回文件下载响应，第二个参数是下载时的原始文件名
    return response()->download($filePath, $appointment->original_name);
}

前端修改 #

调整请求头、文件名取值逻辑：

showPhoto(file) {
      const bearerToken = localStorage.getItem("Bearer");
      axios
        .get(`http://127.0.0.1:8000/api/my-appointment/${file.id}`, {
          responseType: "blob",
          headers: {
            // 去掉写死的Accept，或者根据file的类型动态传入对应MIME
            Authorization: `Bearer ${bearerToken}`,
          },
        })
        .then((res) => {
          const url = window.URL.createObjectURL(res.data);
          const link = document.createElement("a");
          link.href = url;
          // 直接用入参file里的原始文件名，不用从响应里拿
          link.setAttribute("download", file.original_name);
          document.body.appendChild(link);
          link.click();
          window.URL.revokeObjectURL(url); // 释放内存
          link.remove();
        });
    },

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