vue 怎么实现上传
Vue 实现文件上传的方法
使用原生 HTML5 文件上传
通过 <input type="file"> 元素结合 Vue 的数据绑定实现基础文件上传功能。
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0]
},
uploadFile() {
if (!this.file) return
const formData = new FormData()
formData.append('file', this.file)
// 使用 axios 或其他 HTTP 库发送请求
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response)
}).catch(error => {
console.error('上传失败', error)
})
}
}
}
</script>使用第三方组件库
Element UI 或 Ant Design Vue 等 UI 库提供了现成的上传组件。
Element UI 示例:
<template>
<el-upload
action="/api/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
if (!isJPG) {
this.$message.error('只能上传 JPG 格式图片')
}
return isJPG
},
handleSuccess(response, file) {
this.$message.success('上传成功')
}
}
}
</script>处理多文件上传
通过 multiple 属性允许选择多个文件，并循环处理。
<input type="file" multiple @change="handleMultipleFiles" />
<script>
methods: {
handleMultipleFiles(event) {
const files = Array.from(event.target.files)
const formData = new FormData()
files.forEach(file => {
formData.append('files[]', file)
})
axios.post('/api/multi-upload', formData)
}
}
</script>显示上传进度
利用 axios 的 onUploadProgress 回调显示上传进度。
axios.post('/api/upload', formData, {
headers: {'Content-Type': 'multipart/form-data'},
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(percentCompleted + '%')
}
})后端接收示例（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.send('文件上传成功')
})这些方法涵盖了从基础到进阶的文件上传实现方式，可根据项目需求选择适合的方案。
