mirror of
https://github.com/axios/axios.git
synced 2026-04-12 14:41:55 +08:00
1a2ff9c3d1
* adding toFormData test * adding toFormData * initial multipart-FormData playground * formdata playground title * Fix examples/postMultipartFormData/server.js to the examples/**/server.js format, and so event end runs. Co-authored-by: Jay <jasonsaayman@gmail.com>
132 lines
4.0 KiB
HTML
132 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>axios - post example</title>
|
|
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
|
|
<style>
|
|
.postSubmission {
|
|
margin-top: 40px;
|
|
|
|
/* white-space: pre-line; */
|
|
}
|
|
.checkNetwork {
|
|
margin-bottom: 10px;
|
|
}
|
|
.text-strong {
|
|
font-weight: 700;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body class="container">
|
|
<h1>Post multipart/form-data</h1>
|
|
|
|
<form role="form" class="form" onsubmit="return false;">
|
|
<div class="form-group">
|
|
<label for="data">someString</label>
|
|
<input id="someString" type="text"></input>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="data">someNumber</label>
|
|
<input id="someNumber" type="number"></input>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="data">someSamllFile</label>
|
|
<input id="someSamllFile" type="file"></input>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="data">nested.someString</label>
|
|
<input id="nested.someString" type="text"></input>
|
|
</div>
|
|
<div>
|
|
<input type="radio" name="format" value="formData"
|
|
checked>
|
|
<label for="huey">Pass to Axios as FormData</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" name="format" value="json"
|
|
checked>
|
|
<label for="huey">Pass to Axios as json. Let Axios convert to form data</label>
|
|
</div>
|
|
<button id="post" type="button" class="btn btn-primary">POST</button>
|
|
</form>
|
|
|
|
<div class="postSubmission">
|
|
|
|
<div id="checkNetwork" class="checkNetwork hidden">
|
|
<span class="text-strong">Check devtools to see details of request sent, and content of FormData. </span><br/>
|
|
In Chromium check: devtools -> network tab -> request to "server" -> payload tab
|
|
</div>
|
|
|
|
|
|
<div id="errorOutput" class="text-danger">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="/axios.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
|
|
document.getElementById('post').onclick = function () {
|
|
document.getElementById("checkNetwork").classList.remove("hidden")
|
|
|
|
var someString = document.getElementById('someString').value;
|
|
var someNumber = document.getElementById('someNumber').valueAsNumber;
|
|
var files = Array.from(document.getElementById('someSamllFile').files)
|
|
var nestedString = document.getElementById('nested.someString').value;
|
|
var passAsFormData = document.querySelector('input[name="format"]:checked').value==="formData";
|
|
|
|
var data = passAsFormData? new FormData() : {}
|
|
|
|
function addValueToData(key, val, isValDefined){
|
|
if (!isValDefined){
|
|
return
|
|
}
|
|
|
|
if(passAsFormData){
|
|
data.append(key, val)
|
|
} else {
|
|
|
|
var keys = key.split(".")
|
|
if (keys.length===1){
|
|
data[key] = val
|
|
} else {
|
|
data[keys[0]]={
|
|
[keys[1]]: val
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
addValueToData("someString", someString, someString.length)
|
|
addValueToData("someNumber", someNumber, !isNaN(someNumber))
|
|
if (files.length){
|
|
addValueToData("someSmallFile", files[0], true)
|
|
}
|
|
addValueToData("nested.someString", nestedString, nestedString.length)
|
|
|
|
var errorOutput = document.getElementById("errorOutput")
|
|
|
|
axios({
|
|
url: '/postMultipartFormData/server',
|
|
data: data,
|
|
method: "post",
|
|
headers: { "Content-Type": "multipart/form-data" },
|
|
})
|
|
.then(function (res) {
|
|
errorOutput.innerHTML = "";
|
|
})
|
|
.catch(function (err) {
|
|
errorOutput.innerHTML = err.message;
|
|
});
|
|
};
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|