JS进阶--axios上传FormData文件流

沐沐185

已于 2022-12-07 15:55:18 修改

阅读量2.6k

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-09-16 00:19:26 首次发布

本文链接：https://blog.csdn.net/weixin_67642008/article/details/126882116

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

文件上传时，使用input file 标签，使用onchange事件，来获取file对象文件，file使用file[0]来获取，new一个FormData()对象，将获取的file对象通过append 加到 formData对象实例上，通过ajax的send方法，或者通过 axios 将formdata 对象实例发送到后台；

文件上传一般在 http请求头中的content-type 属性配置为 multipart/form-data ；

<!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>