vue 怎么实现上传
实现文件上传功能
在Vue中实现文件上传通常需要结合HTML的<input type="file">元素和JavaScript的FormData对象。以下是具体实现方法：
模板部分
<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-upload-component或element-ui的上传组件：
使用element-ui上传组件
<template>
<el-upload
action="/api/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('文件大小不能超过2MB')
}
return isLt2M
},
handleSuccess(response) {
console.log('上传成功', response)
},
handleError(err) {
console.error('上传失败', err)
}
}
}
</script>处理上传进度
如果需要显示上传进度，可以添加进度回调：
const config = {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(percentCompleted + '%')
}
}
axios.post('/api/upload', formData, config)多文件上传
处理多文件上传时，需要遍历文件列表并添加到FormData：
handleFileUpload(event) {
const files = event.target.files
const formData = new FormData()
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i])
}
axios.post('/api/multiple-upload', formData)
}文件类型限制
在HTML中限制可上传的文件类型：
<input
type="file"
accept="image/*,.pdf,.doc,.docx"
@change="handleFileUpload"
/>或者在JavaScript中进行验证：
beforeUpload(file) {
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
const isValidType = allowedTypes.includes(file.type)
if (!isValidType) {
alert('仅支持JPEG, PNG和PDF文件')
}
return isValidType
}
