axios如何post文件?

kiwi
  • 330
//html:
<input type="file" id="file" onchange="foo(event)">
//js
function foo(event) {
    formdata = new FormData();
    formdata.append('file',event.target.files[0]);
    formdata.append('action','test');
    axios({
        url:'test.php',
        method:'post',
        data:formdata,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then((res)=>{console.log(res)})
}
//php
print_r($_POST);

test.php那边只能接收到action=test,没有file字段,请问是为什么?


我又傻逼了...php获取文件是$_FILES...
headers加不加都无所谓

回复
阅读 19.6k
2 个回答
✓ 已被采纳

自问自答一发...
php获取文件是$_FILES...headers里content-type加不加都无所谓
但这里还是总结一下content-type

为什么要设置Content-type

HTTP请求分为三个部分:状态行、请求头、消息主体。协议规定POST提交的数据必须放在消息主体中,但协议并没有规定数据必须使用什么编码方式。
实际上,开发者完全可以自己决定消息主体的格式,一般服务器端语言如PHP、Python等,都内置了自动解析常见数据格式的功能。服务器端是根据请求头中的Content-type字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。

而GET请求提交的数据以"key1=value1&key2=value2"的格式附在URL之后,也就是在请求头中,不用设置Content-type字段。

常见Content-type

  • application/x-www-form-urlencoded:数据格式为"key1=value1&key2=value2"

  • multipart/form-data:用于传输文件

  • application/json:数据格式为json格式,有的服务器语言不支持(比如PHP,需要从php://input里获得原始输入流,再json_decode成对象。)

  • text/plain:纯文本传输,用得少

表单提交

form表单提交时,Content-typeenctype设置:

<form enctype="multipart/form-data" method="post"></form>

如果不设置enctype,默认为application/x-www-form-urlencoded
目前原生form只支持application/x-www-form-urlencodedmultipart/form-datatext/plain(HTML5)。

Ajax提交

Ajax的POST请求,Content-type默认为text/plain,需要根据具体传输的数据,使用

xhr.setRequestHeader("Content-type","...")

指定具体格式,但如果传送的是FormData格式的数据,会自动设置为multipart/form-data

headers: { 'Content-Type': 'multipart/form-data' }

你知道吗?

宣传栏