vue实现文件功能
文件上传功能实现
使用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.data)
}).catch(error => {
console.error('上传失败', error)
})
}
}
}
</script>文件预览功能
实现图片文件预览功能，使用FileReader API：
methods: {
previewFile(file) {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onload = (e) => {
resolve(e.target.result)
}
reader.readAsDataURL(file)
})
},
async handleFileUpload(event) {
const file = event.target.files[0]
if (!file) return
this.selectedFile = file
this.previewUrl = await this.previewFile(file)
}
}模板中添加预览区域：
<img v-if="previewUrl" :src="previewUrl" style="max-width: 300px; max-height: 300px;" />多文件上传支持
修改文件处理逻辑以支持多文件选择：
handleFileUpload(event) {
this.selectedFiles = Array.from(event.target.files)
},
uploadFiles() {
const formData = new FormData()
this.selectedFiles.forEach(file => {
formData.append('files[]', file)
})
// 剩余上传逻辑与单文件相同
}HTML添加multiple属性：
<input type="file" multiple @change="handleFileUpload" />文件下载功能
实现从服务器下载文件的功能：
downloadFile(fileId) {
axios.get(`/api/download/${fileId}`, {
responseType: 'blob'
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'filename.ext')
document.body.appendChild(link)
link.click()
link.remove()
})
}文件拖放功能
添加拖放区域实现拖拽上传：
<div
@dragover.prevent="dragover = true"
@dragleave.prevent="dragover = false"
@drop.prevent="handleDrop"
:class="{ 'drag-active': dragover }"
>
拖放文件到此处
</div>处理拖放事件：
data() {
return {
dragover: false
}
},
methods: {
handleDrop(event) {
this.dragover = false
this.selectedFiles = Array.from(event.dataTransfer.files)
}
}文件类型验证
在文件选择时验证文件类型：
handleFileUpload(event) {
const file = event.target.files[0]
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
if (!allowedTypes.includes(file.type)) {
alert('不支持的文件类型')
return
}
this.selectedFile = file
}进度显示
添加上传进度显示功能：
uploadFile() {
const config = {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
this.uploadProgress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
}
axios.post('/api/upload', formData, config)
.then(/* ... */)
}模板中添加进度条：
<progress v-if="uploadProgress > 0" :value="uploadProgress" max="100"></progress>
