vue实现上传文件
Vue 文件上传实现方法
使用原生 <input type="file"> 元素
创建文件输入控件并绑定 change 事件：
<template>
<input type="file" @change="handleFileUpload"/>
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const files = event.target.files
// 处理文件逻辑
}
}
}
</script>通过 FormData 发送文件
构建表单数据对象并发送到服务器：
methods: {
uploadFile(file) {
const formData = new FormData()
formData.append('file', file)
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response)
})
}
}使用第三方库（如 vue-upload-component）
安装组件库：
npm install vue-upload-component组件使用示例：
<template>
<file-upload
:post-action="'/upload'"
@input-file="onInputFile"
/>
</template>
<script>
import FileUpload from 'vue-upload-component'
export default {
components: {
FileUpload
},
methods: {
onInputFile(newFile) {
// 处理新上传的文件
}
}
}
</script>拖放上传实现
添加拖放区域和事件处理：
<template>
<div
@dragover.prevent="dragover"
@drop.prevent="drop"
>
拖放文件到此处
</div>
</template>
<script>
export default {
methods: {
dragover(event) {
event.currentTarget.classList.add('bg-blue-100')
},
drop(event) {
const files = event.dataTransfer.files
// 处理拖放的文件
}
}
}
</script>文件预览功能
在上传前预览图片：
methods: {
previewImage(file) {
const reader = new FileReader()
reader.onload = (e) => {
this.previewUrl = e.target.result
}
reader.readAsDataURL(file)
}
}进度条显示
监控上传进度：
axios.post('/upload', formData, {
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
this.uploadProgress = percentCompleted
}
})文件验证
添加文件类型和大小验证：
validateFile(file) {
const allowedTypes = ['image/jpeg', 'image/png']
const maxSize = 2 * 1024 * 1024 // 2MB
if (!allowedTypes.includes(file.type)) {
alert('仅支持 JPG/PNG 格式')
return false
}
if (file.size > maxSize) {
alert('文件大小不能超过 2MB')
return false
}
return true
}多文件上传处理
处理多个文件选择：
handleMultipleFiles(event) {
const files = Array.from(event.target.files)
files.forEach(file => {
if (this.validateFile(file)) {
this.uploadFile(file)
}
})
}
