vue实现列表批量上传
批量上传列表的实现方法
前端部分（Vue.js）
使用<input type="file">元素配合multiple属性实现多文件选择
<template>
<div>
<input type="file" multiple @change="handleFileChange" />
<button @click="uploadFiles">上传文件</button>
<div v-for="(file, index) in fileList" :key="index">
{{ file.name }} - {{ file.size }} bytes
</div>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handleFileChange(e) {
this.fileList = Array.from(e.target.files)
},
async uploadFiles() {
if (this.fileList.length === 0) return
const formData = new FormData()
this.fileList.forEach(file => {
formData.append('files', 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>后端部分（Node.js示例）
使用multer中间件处理多文件上传
const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
const app = express()
app.post('/api/upload', upload.array('files'), (req, res) => {
console.log(req.files) // 获取上传的文件数组
res.json({ message: '文件上传成功', files: req.files })
})
app.listen(3000, () => console.log('服务器已启动'))进度显示与限制控制
添加上传进度监控
async uploadFiles() {
const config = {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(percentCompleted + '%')
}
}
await axios.post('/api/upload', formData, config)
}设置文件大小和类型限制
// 前端限制
handleFileChange(e) {
const files = Array.from(e.target.files)
const allowedTypes = ['image/jpeg', 'image/png']
const maxSize = 5 * 1024 * 1024 // 5MB
this.fileList = files.filter(file =>
allowedTypes.includes(file.type) && file.size <= maxSize
)
}
// 后端限制（multer配置）
const upload = multer({
dest: 'uploads/',
limits: {
fileSize: 5 * 1024 * 1024 // 5MB
},
fileFilter: (req, file, cb) => {
if (['image/jpeg', 'image/png'].includes(file.mimetype)) {
cb(null, true)
} else {
cb(new Error('文件类型不支持'))
}
}
})断点续传实现
分片上传示例代码
async chunkedUpload(file) {
const chunkSize = 1 * 1024 * 1024 // 1MB分片
const chunks = Math.ceil(file.size / chunkSize)
let uploaded = 0
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize
const end = Math.min(start + chunkSize, file.size)
const chunk = file.slice(start, end)
const formData = new FormData()
formData.append('chunk', chunk)
formData.append('name', file.name)
formData.append('index', i)
formData.append('total', chunks)
await axios.post('/api/upload-chunk', formData)
uploaded += chunk.size
console.log(`上传进度: ${((uploaded / file.size) * 100).toFixed(2)}%`)
}
// 通知服务器合并文件
await axios.post('/api/merge', {
name: file.name,
chunks: chunks
})
}
