Nodejs文件上传、监听上传进度的代码

headers: {
'Content-Type': 'multipart/form-data'
},

// 监听 onUploadProgress 事件
onUploadProgress: e => {
const {loaded, total} = e;
// 使用本地 progress 事件
if (e.lengthComputable) {
let progress = loaded / total * 100;
document.querySelector('#progress').setAttribute('value', progress);
}
}
};

const { status } = await axios.post('http://127.0.0.1:3000/upload', formData, config);
if (res.status === 200) {
console.log('上传完成:grinning:');
}
}

Nodejs 部分

这部分比较简单，其实就是单纯的文件上传，我们用 Koa 来实现.

环境搭建及依赖包安装

这里使用 koa2 ，安装以下依赖包：

koa
@koa/router: koa 的路由
@koa/cors：用于跨域
koa-body: 解析 body 数据
nodemon: 使用它启动服务，带有热更新

代码部分

const Koa = require('koa');
const Router = require('@koa/router');
const koaBody = require('koa-body');
const path = require('path');
const fs = require('fs');
const cors = require('@koa/cors');
const app = new Koa();
const router = new Router();
router.all('/upload', async ctx => {
 // 处理文件上传
 const res = await dealFile(ctx);
 res && (ctx.body = {
 status: 200,
 msg: 'complete'
 });
});
// 中间件部分
app.use(cors());
app.use(
 koaBody({
 multipart: true,
 formidable: {
 maxFileSize: 2000 * 1024 * 1024 //最大2G
 }
 })
);
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

dealFile 方法处理上传的文件

出于性能考虑，操作 file 毫无疑问要使用 stream 。

我们要监听文件流 end 事件，由于无法在事件回调里返回响应，因为会报 404，所以需要使用

Promise

来封装一下，然后用 async、await

const dealFile = ctx => {
 const { file } = ctx.request.files;
 const reader = fs.createReadStream(file.path);
 const writer = fs.createWriteStream(
 // 文件上传到 image 文件夹中
 path.resolve(__dirname, './image', file.name)
 );
 return new Promise((resove, reject) => {
 reader.pipe(writer);
 reader.on('end', () => {
 resove(true);
 });
 reader.on('error', err => {
 throw err;
 })
 });
};

到这里就全部完成了。

这里注意一下：前端监听文件进度不需要后端有什么特殊处理，后端仅仅是做了文件流的写入而已。

总结

到此这篇关于Nodejs文件上传、监听上传进度的文章就介绍到这了,更多相关Nodejs文件上传、监听上传进度内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！