vue 实现上传文件
Vue 实现文件上传的方法
使用原生 HTML5 文件上传
在 Vue 组件中可以直接使用 HTML5 的 <input type="file"> 元素实现文件上传：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传文件</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null
}
},
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0]
},
uploadFile() {
if (!this.selectedFile) return
const formData = new FormData()
formData.append('file', this.selectedFile)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response)
}).catch(error => {
console.error('上传失败', error)
})
}
}
}
</script>使用第三方组件库
对于更复杂的需求，可以使用 Element UI 或 Vuetify 等 UI 库提供的上传组件：
<template>
<el-upload
action="/api/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response) {
console.log('上传成功', response)
},
handleError(error) {
console.error('上传失败', error)
},
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!')
return false
}
return true
}
}
}
</script>文件上传进度显示
可以通过 axios 的 onUploadProgress 回调显示上传进度：
uploadFile() {
const formData = new FormData()
formData.append('file', this.selectedFile)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(`上传进度: ${percentCompleted}%`)
}
})
}多文件上传处理
处理多个文件上传时，可以修改 handleFileUpload 方法：
handleFileUpload(event) {
this.selectedFiles = Array.from(event.target.files)
},
uploadFiles() {
const formData = new FormData()
this.selectedFiles.forEach(file => {
formData.append('files[]', file)
})
axios.post('/api/multiple-upload', formData)
}文件类型和大小验证
在文件上传前进行验证：
beforeUpload(file) {
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
const isAllowedType = allowedTypes.includes(file.type)
const isLt5M = file.size / 1024 / 1024 < 5
if (!isAllowedType) {
alert('只允许上传 JPG, PNG 或 PDF 文件!')
return false
}
if (!isLt5M) {
alert('文件大小不能超过 5MB!')
return false
}
return true
}服务器端处理
Node.js Express 服务器处理文件上传的示例：
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload', upload.single('file'), (req, res) => {
console.log(req.file)
res.json({ message: '文件上传成功' })
})这些方法覆盖了 Vue 中实现文件上传的主要场景，可以根据具体需求选择适合的方式。
