ajax 上传文件，监听进度（progress）

mdn

前端代码 github

<body class="m-2">
  <label for="a" class="btn btn-primary">点击上传</label>
  <input id='a' name="file" type="file" accept="image/png, image/jpeg, video/*" style="display:none;" multiple='multiple'>
  <script>
    async function main() {

      const l = console.log
      let fileEle = document.querySelector('#a')
      fileEle.onchange = e => {
        let files = fileEle.files
        if(files.length === 0) return false;

        let data = new FormData()
        for(const file of files){
          data.append('files', file)
        }

        let xhr = new XMLHttpRequest()

        xhr.upload.addEventListener('progress', e => {
          if (e.lengthComputable) {
            var percentage = Math.round((e.loaded * 100) / e.total);
            l(`${percentage}%`)
          }
        })

        xhr.open('post', 'http://localhost:5000/upload')
        xhr.responseType = 'json'
        xhr.send(data)

        xhr.upload.addEventListener('loadstart', e => {
          l('上传开始')
        })

        xhr.upload.addEventListener('error', e => {
          l('上传失败')
        })

        xhr.upload.addEventListener('abort', e => {
          l('上传终止')
        })

        xhr.upload.addEventListener('timeout', e => {
          l('由于预设时间到期，上传终止')
        })

        xhr.upload.addEventListener('load', e => {
          l('上传成功了')
        })

        xhr.upload.addEventListener('loadend', e => {
          l('上传已经停止了')
        })

        xhr.onload = () => {
          l(...xhr.response.imgsSrc);
        }

      }
    }
    main();
  </script>
</body>

</html>

后台代码片段

  @Post('upload')
  @UseInterceptors(FilesInterceptor('files'))
  uploadfile(@UploadedFiles() files, @Body() body) {

    if (!files || files.length === 0) {
      throw new HttpException('参数错误', HttpStatus.FORBIDDEN)
    }

    let imagesSrc = []
    for (const file of files) {
      const imgName = `${Date.now()}-${file.originalname}`
      const writeImage = createWriteStream(join(__dirname, '..', 'upload', imgName))
      writeImage.write(file.buffer)
      imagesSrc.push( `http://localhost:5000/images/${imgName}` )
    }
    return {
      imgsSrc: imagesSrc
    }
  }