Nodejs file upload, monitoring upload progress

Time:2021-3-4

preface

File upload with progress bar will have a better user experience (especially for medium and large files)NodejsCooperate with the front end to complete this function.

We use the front endFormDataTo send data as a carrier.

Article from my blog, will be updated from time to time, welcome to pay attention

effect

Nodejs file upload, monitoring upload progress

Front end section

HTML part and JS part

<input type="file" id="file" />
<! -- progress bar -- >
<progress id="progress" value="0" max="100"></progress>
//Get the DOM object of input file
const inputFile = document.querySelector('#file');

//Monitor change events
inputFile.addEventListener('change', function() {
    //Loading file with formdata
    const formData = new FormData();
    formData.append('file', this.files[0]);
    
    //Upload file
    upload(formData);
})

Now let’s do ituploadmethod.

How to use XMLHttpRequest

const upload = ( formData ) => {
    const xhr = new XMLHttpRequest();
    //Monitor file upload progress
    xhr.upload.addEventListener('progress', function(e) {
      if (e.lengthComputable) {
        //Get progress
        const progress = Math.round((e.loaded * 100) / e.total);
        
        document.querySelector('#progress').setAttribute('value', progress);
      }
    },false);
    
    //Monitor upload completion events
    xhr.addEventListener('load', ()=>{
        console.log ('upload complete ')
    }, false);
    
    xhr.open('post', 'http://127.0.0.1:3000/upload');
    xhr.send(formData);   
}

Ajax upload using jquery

The current usage of jQuery is still huge, so how to use ajax of jQuery to monitor the progress of file upload

const upload = ( formData ) => {
    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:3000/upload',
        data: formData,
        //No data processing and content processing
        processData: false,
        contentType: false,
        //Monitor 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 ('upload succeeded ');
        }
      });
}

Upload and monitor progress using Axios

Axios is widely used. It’s easier to use it to monitor file uploads. The code is as follows:

const upload = async ( formData ) => {

    let config = {
        //Note that the contenttype should be set to multipart / form data
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        
        //Listen for the onuploadprogress event
        onUploadProgress: e => {
            const {loaded, total} = e;
            //Using local progress events
            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 ('upload complete ');
      }
}

Nodejs part

This part is relatively simple. In fact, it’s just a simple file upload, which we useKoaTo achieve

Environment construction and dependent package installation

Used herekoa2, install the following dependency packages:

  • koa
  • @Koa / Router: routing of KOA
  • @Koa / CORS: for cross domain
  • Koa body: parsing body data
  • Nodemon: use it to start services with hot updates

Code section

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 => {
  //Process file upload    
  const res = await dealFile(ctx);

  res && (ctx.body = {
      status: 200,
      msg: 'complete'
    });
});

//Middleware part
app.use(cors());
app.use(
  koaBody({
    multipart: true,
    formidable: {
      Maxfilesize: 2000 * 1024 * 1024 // max 2G
    }
  })
);
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

The dealfile method handles the uploaded files

For the sake of performance, it is necessary to operatefileThere’s no doubt about itstream
We need to monitor the file streamendEvent, because the response cannot be returned in the event callback, because 404 will be reported, you need to use promise to encapsulate it, and then useasync、await

const dealFile = ctx => {
  const { file } = ctx.request.files;

  const reader = fs.createReadStream(file.path);
  const writer = fs.createWriteStream(
    //Upload the file to the image folder
    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;
    })
    
  });
};

It’s all done here.

Note here: the front-end does not need any special processing from the back-end to monitor the file progress. The back-end only writes the file stream.

Recommended Today

asp.net Application of regular expression

1. Balanced group / recursive matching (?’ Group ‘), which is called the corresponding content of group, and counts it on the stack;(?’- Group ‘), and count the corresponding content named group out of the stack(?!) Zero width negative look ahead assertion. Since there is no suffix expression, attempts to match always failRegular example:,{0,1}”5″:\[[^\[\]]*(((?’Open’\[)[^\[\]]*)+((?’-Open’\])[^\[\]]*)+)*(?(Open)(?!))\],{0,1} Test […]