vue 实现 文件上传
使用 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 或其他 HTTP 库发送请求
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response)
}).catch(error => {
console.error('上传失败', error)
})
}
}
}
</script>使用第三方库 vue-upload-component
对于更复杂的上传需求，可以使用专门的 Vue 上传组件：
npm install vue-upload-component<template>
<div>
<file-upload
ref="upload"
v-model="files"
post-action="/api/upload"
@input-filter="inputFilter"
>
选择文件
</file-upload>
<button @click="$refs.upload.active = true">开始上传</button>
</div>
</template>
<script>
import FileUpload from 'vue-upload-component'
export default {
components: {
FileUpload
},
data() {
return {
files: []
}
},
methods: {
inputFilter(newFile, oldFile, prevent) {
if (newFile && !oldFile) {
// 限制文件类型
if (!/\.(jpeg|jpg|png)$/i.test(newFile.name)) {
return prevent()
}
}
}
}
}
</script>实现拖拽上传
Vue 可以轻松实现拖拽上传功能：
<template>
<div
@dragover.prevent="dragover"
@dragleave.prevent="dragleave"
@drop.prevent="drop"
:class="{ 'drag-active': isDragActive }"
>
<p>拖拽文件到此处上传</p>
<input type="file" @change="handleFileUpload" />
</div>
</template>
<script>
export default {
data() {
return {
isDragActive: false,
selectedFile: null
}
},
methods: {
dragover() {
this.isDragActive = true
},
dragleave() {
this.isDragActive = false
},
drop(event) {
this.isDragActive = false
this.selectedFile = event.dataTransfer.files[0]
this.uploadFile()
},
handleFileUpload(event) {
this.selectedFile = event.target.files[0]
this.uploadFile()
},
uploadFile() {
// 上传逻辑同上
}
}
}
</script>
<style>
.drag-active {
border: 2px dashed #42b983;
background-color: rgba(66, 185, 131, 0.1);
}
</style>文件上传进度显示
添加上传进度显示功能：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传</button>
<div v-if="uploadProgress > 0">
上传进度: {{ uploadProgress }}%
<progress :value="uploadProgress" max="100"></progress>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null,
uploadProgress: 0
}
},
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0]
},
uploadFile() {
const formData = new FormData()
formData.append('file', this.selectedFile)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
this.uploadProgress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
}).then(response => {
console.log('上传完成', response)
this.uploadProgress = 0
})
}
}
}
</script>多文件上传实现
支持一次选择多个文件上传：
<template>
<div>
<input type="file" multiple @change="handleFileUpload" />
<button @click="uploadFiles">上传所有文件</button>
<ul>
<li v-for="(file, index) in selectedFiles" :key="index">
{{ file.name }} ({{ (file.size / 1024).toFixed(2) }} KB)
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
selectedFiles: []
}
},
methods: {
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/upload-multiple', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('所有文件上传完成', response)
})
}
}
}
</script>以上方法涵盖了 Vue 中实现文件上传的常见场景，包括基础上传、使用第三方库、拖拽上传、进度显示和多文件上传等功能。
