ajax 上傳文件，監聽進度（progress）
阿新 • • 發佈：2018-09-10
except json cal date isp utf-8 prim charset exceptio
前端代碼
<!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/[email protected]/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）