vue上传文件实现导入
Vue 文件上传实现方法
使用原生 <input type="file"> 元素
创建文件输入元素并监听 change 事件获取文件对象
<template>
<input type="file" @change="handleFileUpload" />
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
// 处理文件逻辑
}
}
}
</script>使用 FormData 进行 AJAX 上传
通过 XMLHttpRequest 或 axios 发送 multipart/form-data 格式数据
uploadFile(file) {
const formData = new FormData()
formData.append('file', file)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response)
})
}第三方库集成
使用 vue-dropzone 等专门的上传组件
npm install vue2-dropzone<template>
<vue-dropzone
id="dropzone"
:options="dropzoneOptions"
@vdropzone-success="uploadSuccess"
/>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
components: {
vueDropzone: vue2Dropzone
},
data() {
return {
dropzoneOptions: {
url: 'https://example.com/upload',
thumbnailWidth: 150,
maxFilesize: 2
}
}
}
}
</script>文件预览功能
在上传前显示文件预览
previewFile(file) {
const reader = new FileReader()
reader.onload = (e) => {
this.previewUrl = e.target.result
}
reader.readAsDataURL(file)
}进度条实现
展示上传进度
axios.post('/api/upload', formData, {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
this.uploadProgress = percentCompleted
}
})文件验证
在上传前进行基本验证
validateFile(file) {
const validTypes = ['image/jpeg', 'image/png']
const maxSize = 2 * 1024 * 1024 // 2MB
if (!validTypes.includes(file.type)) {
return '仅支持 JPG/PNG 格式'
}
if (file.size > maxSize) {
return '文件大小不能超过 2MB'
}
return null
}多文件上传
支持批量文件选择
handleMultipleFiles(event) {
const files = Array.from(event.target.files)
files.forEach(file => {
this.uploadFile(file)
})
}
