Node.js 进阶(六):手把手教你使用和理解文件上传的 Multer 实现,通过软件包了解 O(∩_∩)O ~-前端
最编程
2024-03-02 22:59:13
...
界面
代码
因为重点在服务端,所以这里对前端部分代码不做过多阐述,直接上代码!
<template>
<el-upload
class="upload-demo"
action="/api/files/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-success="handleAvatarSuccess"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传 jpg、png、gif 文件,且不超过 200kb </div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [
{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
]
}
},
methods: {
handleAvatarSuccess(res, file) {
if (res.code === 10000) {
this.$message.error(res.message)
this.fileList.splice(this.fileList.length, 1)
} else {
this.$message.success('上传成功')
}
},
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePreview(file) {
console.log(file)
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`)
}
}
}
</script>
<style lang="scss" scoped>
.upload-demo {
text-align: center;
margin-top: 100px;
}
</style>
下面我们重点来看服务端的逻辑!!