vue实现上传
Vue 实现文件上传
Vue 中实现文件上传通常结合 HTML 的 <input type="file"> 元素和 JavaScript 的 FormData 对象，通过 HTTP 请求将文件发送到服务器。
基本实现方法
创建一个文件上传组件，监听文件选择事件并处理上传逻辑：
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="submitFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0]
},
async submitFile() {
if (!this.file) return
const formData = new FormData()
formData.append('file', this.file)
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>使用第三方库
对于更复杂的需求，可以使用专门的文件上传库：
-
vue-dropzone：提供拖放上传功能
npm install vue2-dropzone -
vue-upload-component：功能丰富的上传组件
npm install vue-upload-component
进度显示
实现上传进度显示可以增强用户体验：
async submitFile() {
const config = {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(percentCompleted)
}
}
await axios.post('/api/upload', formData, config)
}多文件上传
支持同时选择多个文件并上传：
<input type="file" multiple @change="handleFileUpload" />handleFileUpload(event) {
this.files = Array.from(event.target.files)
}
async submitFiles() {
const formData = new FormData()
this.files.forEach(file => {
formData.append('files[]', file)
})
await axios.post('/api/upload-multiple', formData)
}文件验证
在上传前验证文件类型和大小：
handleFileUpload(event) {
const file = event.target.files[0]
const allowedTypes = ['image/jpeg', 'image/png']
const maxSize = 2 * 1024 * 1024 // 2MB
if (!allowedTypes.includes(file.type)) {
alert('仅支持JPEG和PNG格式')
return
}
if (file.size > maxSize) {
alert('文件大小不能超过2MB')
return
}
this.file = file
}服务器端处理
Node.js Express 示例处理上传文件：
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload', upload.single('file'), (req, res) => {
console.log(req.file)
res.json({ message: '文件上传成功' })
})这些方法涵盖了 Vue 中实现文件上传的主要场景和技术要点，可以根据具体需求选择合适的实现方式。
