前端、后端node.js文件上传

71 阅读 0 评论 47 点赞

我是靠谱客的博主飞快草丛，最近开发中收集的这篇文章主要介绍前端、后端node.js文件上传，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端实现文件上传


<body>
<!-- 没有设置多选，只能选择一个文件 -->
<input type="file" id="file"/>
</body>
<script>
// 获取文件选择控件
var file = document.getElementById('file');
// 为文件选择控件添加onchanges事件
// 在用户文件选择时触发
file.onchange = function(){
// 创建空的formData
var formData = new FormData();
// 将用户选择的文件追加到formData表单对象中
formData.append('attrName',this.files[0]);
//	this.files[0] this指向file,用户选择的文件
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 对ajax对象进行配置
// 只有post方法能实现文件上传
xhr.open('post','http://localhost:3000/upload')
// 把文件发送到服务端 发送ajax请求
xhr.send(formData);
// 监听服务器端响应给客户端的数据
xhr.onload = function(){
// 如果服务器端返回的http状态码为200 请求成功
if(xhr.status == 200){
// 将服务器端返回的数据显示在控制台中
console.log(xhr.responseText);
}else{
console.log("上传失败，出错了")
}
}
}
</script>

上传文件进度条显示

<body>
<!-- 没有设置多选，只能选择一个文件 -->
<input type="file" id="file"/>
<div class="progress">
<div class="progress-bar" style="width:70%" id="bar">70%</div>
</div>
</body>
<script>
// 获取文件选择控件
var file = document.getElementById('file');
var bar = document.getElementById('bar');
// 为文件选择控件添加onchanges事件
// 在用户文件选择时触发
file.onchange = function(){
// 创建空的formData
var formData = new FormData();
// 将用户选择的文件追加到formData表单对象中
formData.append('attrName',this.files[0]);
//	this.files[0] this指向file,用户选择的文件
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 对ajax对象进行配置
// 只有post方法能实现文件上传
xhr.open('post','http://localhost:4040/upload');
// onprogress在文件上传的过程中持续触发
xhr.upload.onprogress = function(ev){
// ev.loaded 文件已经上传了多少
// ev.total
上传文件的问大小
var result = (ev.loaded / ev.total) * 100 + '%';
// 设置进度条的宽度
bar.style.width = result;
// 将百分比显示在进度条中
bar.innerHTML = result;
console.log(ev);
}
// 把文件发送到服务端 发送ajax请求
xhr.send(formData);
// 监听服务器端响应给客户端的数据
xhr.onload = function(){
// 如果服务器端返回的http状态码为200 请求成功
if(xhr.status == 200){
// 将服务器端返回的数据显示在控制台中
console.log(xhr.responseText);
console.log('成功')
}else{
console.log("上传失败，出错了")
}
}
}
</script>

node.js后端实现文件上传

方法一

const experss = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');
const app = experss();
app.listen(3000, () => {
console.log(`web服务器工作在3000端口`);
});
//文件上传界面：
app.get('/uploads', (req, res) => {
res.sendFile(path.join(__dirname, 'users.html'));
});
//处理含有文件上传的表单
app.post('/doupload', (req, res) => {
let filePath = path.join(__dirname, 'uploads');
//判断目录或文件是否存在：
if (!fs.existsSync(filePath)) { //目录不存在时
fs.mkdirSync(filePath); //创建目录
}
//uploadDir:设置文件上传成功后的存放位置
//初始化
const form = formidable({ multiples: true, uploadDir: filePath });
// console.log(form, 333);
form.parse(req, (err, fields, files) => {
// console.log(err, fields, files, 111);
if (err) { //表单处理失败
res.send('表单处理失败');
} else { //表单处理成功 
//获取用户选择的要上传文件的文件名:
let ufilename = files.pic.originalFilename;
//获取用户选择的要上传文件的文件扩展名：
let extNames = path.extname(ufilename);
// console.log(extNames, 666);
//使用自已生成新随机文件名:
完整文件名=文件名.扩展名
//
form表单要设置成enctype="multipart/form-data",pic是文件上传input type="file"的name
let fullname = `${files.pic.newFilename}${extNames}`
console.log(fullname);
//将上传成功后生成的临时文件名改为正式文件名
fs.renameSync(files.pic.filepath, `${filePath}/${fullname}`);
res.send('OK')
}
});
});

方法二


```javascript
app.post('/upload',(req,res)=>{
//创建formidable表单解析对象
const form = new formidadle.IncomingForm();
//设置客户端上传文件的存储路径
form.uploadDir = path.join(__dirname,'public','uploads');
//保留上传文件的后缀名字
form.keepExtensions = true;
//解析客户端传递过来的FormData对象
form.parse(req,(err,fields,files)=>{
res.send('ok');
})
})