vue.js - axios如何post文件？

问题描述

问 题

//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加不加都无所谓

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

自问自答一发...
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-type由enctype设置：

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

如果不设置enctype，默认为application/x-www-form-urlencoded
目前原生form只支持application/x-www-form-urlencoded，multipart/form-data和text/plain（HTML5）。

Ajax提交

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

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

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

这篇关于vue.js - axios如何post文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！