用户上传二进制文件只能用post请求,不能使用get请求
获取上传文件中的文件
<input type="file" id="file">
Files 集合返回指定的文件夹中所有文件组成的一个集合。
将用户选择文件追加到fromData表单对象中
formData.append('attrName', this.files[0]);
js中
创建formidable表单解析对象
// 实现文件上传路由
app.post('/upload', (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 需要引入path模块,进行设置绝对路径
// 设置客户端上传文件的存储路径
// __dirname绝对路径
// uploads文件上传的地址
form.uploadDir = path.join(__dirname, 'public', 'uploads' );
// 保留上传文件的后缀名
form.keepExtensions = true;
// 解析客户端传递过来的FromData对象
// 第一个参数错误对象
// 第二个参数保存了表单中的普通请求参数
// 第三个参数保存了文件上传的请求信息
form.parse(req, (err, fields, files) => {
res.send('ok');
})
})
页面
<script type="text/javascript">
// 获取文件控件
var file = document.getElementById('file')
// 为文件选择控件添加onchanges事件
// 在用户选择文件时触发
file.onchange = function() {
// 创建空的FormData表单对象
var formData = new FormData();
// 将用户选择文件追加到fromData表单对象中
formData.append('attrName', this.files[0]);
// 创建Ajax对象
var xhr = new XMLHttpRequest();
// 对ajax对象进行配置
xhr.open('post', 'http://localhost:3000/upload');
// 发送ajax请求
xhr.send(formData);
// 监听服务器端响应给客户端的数据
xhr.onload = function() {
// 如果服务器端返回的http码类型为200
// 说明请求成功
if (xhr.status == 200) {
// 将服务器端返回的数据显示在控制台中
console.log(xhr.responseText);
}
}
}
</script>