mirror of
https://github.com/axios/axios.git
synced 2026-04-15 15:36:19 +08:00
46e1981d0f
* Refactor form data handling in index.html * Update examples/postMultipartFormData/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update examples/postMultipartFormData/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Jay <jasonsaayman@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
129 lines
4.0 KiB
HTML
129 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">someSmallFile</label>
|
|
<input id="someSmallFile" 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 () {
|
|
// Show network/loading indicator
|
|
document.getElementById("checkNetwork").classList.remove("hidden");
|
|
// Grab values from inputs
|
|
|
|
const someString = document.getElementById('someString').value;
|
|
const someNumber = document.getElementById('someNumber').valueAsNumber;
|
|
const files = Array.from(document.getElementById('someSmallFile').files);
|
|
const nestedString = document.getElementById('nested.someString').value;
|
|
const passAsFormData = document.querySelector('input[name="format"]:checked').value === "formData";
|
|
|
|
const data = passAsFormData ? new FormData() : {};
|
|
|
|
// Helper to add value to FormData or plain object
|
|
function addValueToData(key, val, isValDefined) {
|
|
if (!isValDefined) return;
|
|
|
|
if (passAsFormData) {
|
|
data.append(key, val);
|
|
} else {
|
|
const keys = key.split(".");
|
|
if (keys.length === 1) {
|
|
data[key] = val;
|
|
} else {
|
|
// Preserve existing nested objects if any
|
|
data[keys[0]] = data[keys[0]] || {};
|
|
data[keys[0]][keys[1]] = val;
|
|
}
|
|
}
|
|
}
|
|
|
|
addValueToData("someString", someString, someString.length > 0);
|
|
addValueToData("someNumber", someNumber, !isNaN(someNumber));
|
|
if (files.length) addValueToData("someSmallFile", files[0], true);
|
|
addValueToData("nested.someString", nestedString, nestedString !== undefined && nestedString !== null);
|
|
|
|
const errorOutput = document.getElementById("errorOutput");
|
|
|
|
axios({
|
|
url: '/postMultipartFormData/server',
|
|
data: data,
|
|
method: "post",
|
|
headers: passAsFormData ? { "Content-Type": "multipart/form-data" } : {},
|
|
})
|
|
.then(res => {
|
|
errorOutput.innerHTML = "Successfully posted!";
|
|
})
|
|
.catch(err => {
|
|
console.error("Error posting data:", err);
|
|
errorOutput.innerHTML = `${err.message}`;
|
|
});
|
|
};
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|