前端代码
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>Document</title> ?<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" ???integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> ?<style> ???html, body { ?????width: 100%; ?????height: 100%; ???} ?</style></head><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 ???} ?}ajax 上传文件，监听进度（progress）
原文地址：https://www.cnblogs.com/ajanuw/p/9616098.html