前端代码
<!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
}
}原文地址：https://www.cnblogs.com/ajanuw/p/9616098.html
时间： 2024-10-11 17:31:11