【问题标题】:Uploading file, axios works but fetch API doesn't, what did I do wrong?上传文件,axios 工作,但 fetch API 没有,我做错了什么?
【发布时间】:2021-03-27 19:17:53
【问题描述】:

我正在使用 fetch API 与服务器通信,然后我意识到当我使用 fetch API 上传文件时,post 请求看起来很奇怪,我的 PHP 服务器无法正确地通过$_FILES 获取文件。

这是我的基本设置,filefileName 已预先填充。

const api = 'xxxx/api/file';
const body = new FormData();
body.append('files[]', file, fileName);
body.append('bid', 529);

const headers = { 
  'Content-Type': 'multipart/form-data', 
  'Authorization': 'Token xxxxxx'
};

当我使用 fetch API 时,post 请求看起来像这样,我的任何 PHP 服务器都无法获取 post 数据。

fetch(api, { method: 'POST', body, headers, mode: 'cors' });


但是当我使用 axios 时,请求是这样的,我的 PHP 服务器可以正确获取文件:

axios.post(api, body, { headers });


那么发生了什么? axios 做了什么不同的事情吗?

有没有办法在不使用 axios 的情况下实现这一点?

【问题讨论】:

    标签: javascript php axios fetch-api


    【解决方案1】:

    尝试不带 content-Type 键的 fetch API:

    const api = 'xxxx/api/file';
    const body = new FormData();
    body.append('files[]', file, fileName);
    body.append('bid', 529);
    
    const headers = { 
      'Authorization': 'Token xxxxxx'
    };
    
    delete headers.headers['Content-Type'];
    
    fetch(api, { method: 'POST', body, headers, mode: 'cors' });
    

    来源:https://muffinman.io/blog/uploading-files-using-fetch-multipart-form-data/

    【讨论】:

    • 我也试过了,结果是一样的。 content-type: multipart/form-data 以某种方式自动添加
    • @HaoWu 内容类型由 FormData 自动处理。
    • @HaoWu 获取请求的问题是缺少边界参数。没有边界 PHP 无法解析它,并且边界可能丢失,因为您正在覆盖 Content-Type
    • 原来是我不小心将content-type 分配到了其他地方。感谢您的提醒。
    • 我认为 axios 工作的原因是因为当FormData 是有效负载时,axios 忽略了 content-type 标头。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-13
    • 2021-05-20
    • 2019-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多