vue实现多图片上传
Vue 多图片上传实现
基本文件上传组件
创建基于<input type="file">的基础组件，支持多选：
<template>
<div>
<input
type="file"
multiple
accept="image/*"
@change="handleFileChange"
>
<div v-for="(file, index) in files" :key="index">
{{ file.name }} - {{ (file.size / 1024).toFixed(2) }}KB
</div>
</div>
</template>
<script>
export default {
data() {
return {
files: []
}
},
methods: {
handleFileChange(e) {
this.files = Array.from(e.target.files)
}
}
}
</script>图片预览功能
使用FileReader实现客户端预览：
methods: {
handleFileChange(e) {
const files = Array.from(e.target.files)
files.forEach(file => {
const reader = new FileReader()
reader.onload = (e) => {
this.files.push({
raw: file,
preview: e.target.result
})
}
reader.readAsDataURL(file)
})
}
}上传进度显示
配合axios实现上传进度监控：
async uploadFiles() {
const formData = new FormData()
this.files.forEach(file => {
formData.append('images[]', file.raw)
})
try {
const res = await axios.post('/api/upload', formData, {
onUploadProgress: progressEvent => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
this.uploadProgress = percent
}
})
console.log('上传成功', res.data)
} catch (error) {
console.error('上传失败', error)
}
}拖拽上传支持
添加拖拽区域交互：
<div
class="drop-area"
@dragover.prevent
@dragenter.prevent
@drop.prevent="handleDrop"
>
拖拽图片到此处
</div>
<script>
methods: {
handleDrop(e) {
const files = e.dataTransfer.files
this.handleFileChange({ target: { files } })
}
}
</script>
<style>
.drop-area {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
}
</style>文件类型和大小验证
在上传前进行客户端验证：
validateFiles(files) {
const validTypes = ['image/jpeg', 'image/png', 'image/gif']
const maxSize = 5 * 1024 * 1024 // 5MB
return files.every(file => {
const isValidType = validTypes.includes(file.type)
const isValidSize = file.size <= maxSize
if (!isValidType) alert('仅支持JPEG/PNG/GIF格式')
if (!isValidSize) alert('单文件大小不能超过5MB')
return isValidType && isValidSize
})
}分块上传支持
对于大文件可采用分块上传：
async uploadChunks(file) {
const chunkSize = 1 * 1024 * 1024 // 1MB
const chunks = Math.ceil(file.size / chunkSize)
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize
const end = Math.min(file.size, start + chunkSize)
const chunk = file.slice(start, end)
const formData = new FormData()
formData.append('chunk', chunk)
formData.append('chunkIndex', i)
formData.append('totalChunks', chunks)
formData.append('fileId', file.uniqueId)
await axios.post('/api/upload-chunk', formData)
}
}第三方组件集成
如需快速实现可考虑以下第三方库：
vue-upload-component：功能全面的上传组件vue-dropzone：支持拖拽上传vant/element-ui等UI库中的上传组件
安装示例：
npm install vue-upload-component使用示例：
<file-upload
multiple
accept="image/*"
v-model="files"
@input-filter="inputFilter"
/>服务器端配合
Node.js示例（使用multer中间件）：
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload', upload.array('images'), (req, res) => {
console.log(req.files) // 处理上传文件
res.json({ success: true })
})
