文件上传时,使用input file 标签,使用onchange事件,来获取file对象文件,file使用file[0]来获取,new一个FormData()对象,将获取的file对象通过append 加到 formData对象实例上,通过ajax的send方法,或者通过 axios 将formdata 对象实例发送到后台;
文件上传一般在 http请求头中的content-type 属性配置为 multipart/form-data ;
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="fileId" onchange="changeFn()">
<script src="./axios/axios.js"></script>
<script>
function changeFn() {
let fileDOM = document.getElementById("fileId");
// console.log(fileDOM);
// console.log(fileDOM.files);
// console.log(fileDOM.files[0]);
let formdata = new FormData();
// console.log(formdata);
formdata.append('file', fileDOM.files[0]);
// console.log(formdata);
//获取请求头
axios.get("https://******/api/private/v1/login", {
params: {
username: "******",
password:"******"
}
})
.then(res => {
// console.log(res.data.data.token);
sessionStorage.token = res.data.data.token
})
// // ajax 发送请求
// let xhr = new XMLHttpRequest();
// xhr.open('post', "https://l******/api/private/v1/upload", false);
// xhr.setRequestHeader('Authorization',
// 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NjMyNTY0NjUsImV4cCI6MTY2MzM0Mjg2NX0.fBtTBySZEa4BxyeSfSsiLNux2XpccCzBBhZpA54uLFY'
// );
// xhr.onreadystatechange = function() {
// if (xhr.readyState == 4) {
// // console.log(xhr.responseText);
// console.log(JSON.parse(xhr.responseText));
// }
// };
// xhr.send(formdata)
// axios 发送formdata文件,作为参数放在data对象中
axios({
url: 'https://******/api/private/v1/upload',
method: 'post',
headers: {
'Authorization': sessionStorage.token
},
data: formdata
})
.then(res => {
console.log(res);
})
}
</script>
</body>
</html>
_67642008/article/details/126882116