vue实现上传
Vue 文件上传实现方法
基础文件上传
使用原生 HTML 的 <input type="file"> 结合 Vue 实现基础上传功能：
<template>
<div>
<input type="file" @change="handleFileChange" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null
}
},
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0]
},
async uploadFile() {
if (!this.selectedFile) return
const formData = new FormData()
formData.append('file', this.selectedFile)
try {
const response = await axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
console.log('上传成功', response.data)
} catch (error) {
console.error('上传失败', error)
}
}
}
}
</script>使用第三方组件
Element UI 的 Upload 组件实现更丰富的上传功能：
<template>
<el-upload
action="/api/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!')
}
return isLt2M
},
handleSuccess(response, file) {
this.$message.success('上传成功')
}
}
}
</script>拖拽上传实现
添加拖拽区域实现更友好的上传体验：
<template>
<div
@dragover.prevent="dragover"
@dragleave.prevent="dragleave"
@drop.prevent="drop"
:class="{ 'drag-active': isDragActive }"
class="upload-area">
<p>拖拽文件到此处或点击上传</p>
<input type="file" @change="handleFileChange" />
</div>
</template>
<script>
export default {
data() {
return {
isDragActive: false,
selectedFile: null
}
},
methods: {
dragover() {
this.isDragActive = true
},
dragleave() {
this.isDragActive = false
},
drop(e) {
this.isDragActive = false
this.selectedFile = e.dataTransfer.files[0]
this.uploadFile()
},
// 其他方法同上
}
}
</script>
<style>
.upload-area {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
}
.drag-active {
border-color: #409eff;
}
</style>多文件上传实现
处理多个文件同时上传的情况：
methods: {
handleFileChange(event) {
const files = event.target.files
if (!files.length) return
const formData = new FormData()
Array.from(files).forEach(file => {
formData.append('files[]', file)
})
this.uploadFiles(formData)
},
async uploadFiles(formData) {
try {
const response = await axios.post('/api/multi-upload', formData)
console.log('所有文件上传成功', response.data)
} catch (error) {
console.error('上传出错', error)
}
}
}上传进度显示
添加上传进度反馈：
methods: {
async uploadFile() {
const config = {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(percentCompleted + '%')
// 可以更新到data中的progress变量用于UI显示
}
}
await axios.post('/api/upload', formData, config)
}
}以上方法涵盖了 Vue 中实现文件上传的常见场景，可根据实际需求选择适合的方式或组合使用。
