FormData对象内涵文件上传小案例_formdata上传文件案例、-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42321619/article/details/108147337

Form对象

FormData对象的作用
FormData对象的使用
FormData 对象的实例方法
FormData二进制文件上传

FormData对象的作用

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
异步上传二进制文件

FormData对象的使用

创建一个html表单
将其转化为forData对象
提交

FormData 对象的实例方法

1.获取对象属性的值

forData.get('key');

2.设置对象属性的值

forData.set('key','value');
注意：若是没有初始化的对象，则会自动创建并赋值

3.删除对象属性的值

forData.delete('key');

4.追加对象属性的值

forData.append('key','value');
注意：set与append的区别是，在属性名已存在的情况下，set会覆盖已有的值，append会保留两个值，但是服务器最终接受的是后发送的值

FormData二进制文件上传

//index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<style type="text/css">
			.container {
				padding-top: 60px;
			}

			.padding {
				padding: 5px 0 20px 0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="form-group">
				<label>请选择文件</label>
				<input type="file" id="file">
				<div class="padding" id="box">
					<!--<img src="" class="img-rounded img-responsive">-->
				</div>
				<div class="progress">
					<div class="progress-bar" style="width: 0%;" id="bar">0%</div>
				</div>
			</div>
		</div>
		<script>
			var file = document.getElementById('file');
			var bar = document.getElementById('bar');
			var box = document.getElementById('box');
				
				file.onchange = function() {
				var formData = new FormData();
				formData.append('data', file.files[0]);

			
				var xhr = new XMLHttpRequest();
				xhr.open('post', 'http://127.0.0.1:3000/updata');
				xhr.upload.onprogress = function(ev) {
					// ev.loaded 文件已经上传了多少
					// ev.total  上传文件的总大小
					var result = (ev.loaded / ev.total) * 100 + '%';
					bar.style.width = result;
					bar.innerHTML = result;
				}
				xhr.send(formData);
				xhr.onload = function() {
					if (xhr.status == 200) {
						console.log(xhr.responseText)
					/* 	var results = JSON.parse(xhr.responseText);
						var img = document.createElement('img');
						img.src = results.path;
						img.onload = function(){
							box.appendChild(img);
						}*/
					}

				}
			}
		</script>	
	</body>
</html>

box部分是准备用于上传图片，然后进行展示的。但遇到一个问题，不知怎么解决。
在这里插入图片描述

//app.js
var express = require('express');
var path = require('path');
var formidable = require('formidable');

var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.post('/updata',(req, res)=>{
	const form = new formidable.IncomingForm();
	form.uploadDir = path.join(__dirname,'datadb');
	form.parse(req, (err, fields, files)=>{
		
		res.send({
			path:files.data.path.split('public')[1]
		});
		
	})
})

app.listen(3000,(err)=>{
	console.log('success')
})