vue 实现 上传文件
文件上传基础实现
在Vue中实现文件上传通常使用HTML的<input type="file">元素结合FormData对象。基本实现方式如下：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="submitFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0]
},
async submitFile() {
const formData = new FormData()
formData.append('file', this.file)
try {
const response = await axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
console.log('上传成功', response.data)
} catch (error) {
console.error('上传失败', error)
}
}
}
}
</script>多文件上传实现
支持多文件选择的上传实现方式：
<template>
<div>
<input type="file" multiple @change="handleFileUpload" />
<button @click="submitFiles">上传多个文件</button>
</div>
</template>
<script>
export default {
data() {
return {
files: []
}
},
methods: {
handleFileUpload(event) {
this.files = Array.from(event.target.files)
},
async submitFiles() {
const formData = new FormData()
this.files.forEach(file => {
formData.append('files[]', file)
})
try {
const response = await axios.post('/upload-multiple', formData)
console.log('上传成功', response.data)
} catch (error) {
console.error('上传失败', error)
}
}
}
}
</script>文件上传进度显示
添加上传进度显示功能：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="submitFile">上传</button>
<div v-if="uploadProgress > 0">
上传进度: {{ uploadProgress }}%
<progress :value="uploadProgress" max="100"></progress>
</div>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
uploadProgress: 0
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0]
},
async submitFile() {
const formData = new FormData()
formData.append('file', this.file)
try {
const response = await axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
this.uploadProgress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
})
console.log('上传成功', response.data)
} catch (error) {
console.error('上传失败', error)
} finally {
this.uploadProgress = 0
}
}
}
}
</script>文件类型和大小验证
在上传前进行文件验证：
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
const validTypes = ['image/jpeg', 'image/png', 'application/pdf']
const maxSize = 5 * 1024 * 1024 // 5MB
if (!validTypes.includes(file.type)) {
alert('请上传JPEG、PNG图片或PDF文件')
return
}
if (file.size > maxSize) {
alert('文件大小不能超过5MB')
return
}
this.file = file
}
}
}
</script>使用第三方组件库实现
使用Element UI的上传组件示例：
<template>
<el-upload
action="/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handleSuccess(response, file) {
console.log('上传成功', response)
},
handleError(err, file) {
console.error('上传失败', err)
},
beforeUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('文件大小不能超过5MB')
return false
}
return true
}
}
}
</script>服务器端处理示例
Node.js Express处理文件上传的示例代码：
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
const app = express()
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file)
res.json({ message: '文件上传成功', file: req.file })
})
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000')
})
