文件上传如果加上进度条会有更好的用户体验（尤其是中大型文件），本文使用Nodejs配合前端完成这个功能。

前端我们使用 FormData 来作为载体发送数据。

效果前端部分HTML 部分 和 Js 部分

<input type="file" id="file" /><!-- 进度条 --><progress id="progress" value="0" max="100"></progress>

// 获取 input file 的 dom 对象const inputFile = document.querySelector('#file');// 监听 change 事件inputFile.addEventListener('change', function() {    // 使用 formData 装载 file    const formData = new FormData();    formData.append('file', this.files[0]);        // 上传文件    upload(formData);})

下面我们实现upload 方法。

使用 XMLHttpRequest 的方式

const upload = ( formData ) => {    const xhr = new XMLHttpRequest();    // 监听文件上传进度    xhr.upload.addEventListener('progress', function(e) {      if (e.lengthComputable) {        // 获取进度        const progress = Math.round((e.loaded * 100) / e.total);                document.querySelector('#progress').setAttribute('value', progress);      }    },false);        // 监听上传完成事件    xhr.addEventListener('load', ()=>{        console.log('上传完成')    }, false);        xhr.open('post', ';);    xhr.send(formData);   }

jQuery 目前的使用量依然庞大，那么使用 jQuery 的 ajax 如何监听文件上传进度呢：

const upload = ( formData ) => {    $.ajax({        type: 'post',        url: ';,        data: formData,        // 不进行数据处理和内容处理        processData: false,        contentType: false,        // 监听 xhr        xhr: function() {          const xhr = $.ajaxSettings.xhr();          if (xhr.upload) {            xhr.upload.addEventListener('progress', e => {                const { loaded, total } = e;                var progress = (loaded / total) * 100;                document.querySelector('#progress').setAttribute('value', progress);              },              false            );            return xhr;          }        },        success: function(response) {          console.log('上传成功');        }      });}

axios 使用量非常大，用它监听文件上传更简单，代码如下：

const upload = async ( formData ) => {    let config = {        // 注意要把 contentType 设置为 multipart/form-data        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(';, formData, config);      if (res.status === 200) {          console.log('上传完成');      }}

这部分比较简单，其实就是单纯的文件上传，我们用 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);

出于性能考虑，操作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;    })      });};

到这里就全部完成了。

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

作者：Ve

链接：

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。