<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload with Axios</title>
</head>
<body>
<input type="file" id="fileInput" multiple />
<button id="uploadBtn">Upload File</button>
<script src="https://cdn.staticfile.net/axios/1.6.5/axios.min.js"></script>
<script>
document.getElementById('uploadBtn').addEventListener('click', function() {
// 获取文件输入元素
const fileInput = document.getElementById('fileInput');
console.log("🚀 ~ document.getElementById ~ fileInput:", fileInput.files)
// 获取选中的文件
const files = fileInput.files;
// 创建一个FormData对象
const formData = new FormData();
// 添加随意的name、stock、unit字段
formData.append('name', '苹果3');
formData.append('stock', '100');
formData.append('unit', '个');
// 检查是否有文件被选中
if (files.length > 0) {
// 遍历所有选中的文件
for (let i = 0; i < files.length; i++) {
const file = files[i];
// formData.append('file', file, file.name);
//通常不需要将文件转换为 Blob，因为 FormData 对象可以直接处理文件
// 创建一个FileReader实例
const reader = new FileReader();
// 设置文件读取完成时的回调函数
reader.onload = function(event) {
// event.target.result 包含了文件内容作为Blob对象
const blob = new Blob([event.target.result], { type: file.type });
formData.append('file', blob, file.name);
if(i==files.length-1){
upform(formData);
}
};
// 开始读取文件内容
reader.readAsArrayBuffer(file);
}
} else {
alert('Please select a file to upload.');
}
// upform(formData);
});
function upform(formData) {
// 使用axios发送请求
axios.post('http://***', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(function (response) {
// 处理成功情况
console.log(response.data);
})
.catch(function (error) {
// 处理错误情况
console.error(error);
});
}
</script>
</body>
</html>欢迎光顾我的小站！
Comments | NOTHING