vue实现文件上传
Vue 文件上传实现方法
使用原生 <input type="file"> 结合 FormData
创建一个文件输入控件并绑定 change 事件：
<template>
<input type="file" @change="handleFileUpload" />
</template>在 methods 中处理文件并上传：
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response);
}).catch(error => {
console.error('上传失败', error);
});
}
}使用第三方组件库
Element UI 上传组件示例：
<template>
<el-upload
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button type="primary">点击上传</el-button>
</el-upload>
</template>处理上传逻辑：
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('文件大小不能超过2MB');
}
return isLt2M;
},
handleSuccess(response) {
this.$message.success('上传成功');
}
}拖拽上传实现
HTML 结构：
<template>
<div
class="dropzone"
@dragover.prevent
@drop="handleDrop">
拖拽文件到此处上传
</div>
</template>处理拖拽事件：
methods: {
handleDrop(e) {
e.preventDefault();
const files = e.dataTransfer.files;
if (files.length > 0) {
this.uploadFile(files[0]);
}
},
uploadFile(file) {
// 同FormData上传逻辑
}
}样式建议：
.dropzone {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}文件预览功能
图片预览实现：
methods: {
createPreview(file) {
const reader = new FileReader();
reader.onload = (e) => {
this.previewUrl = e.target.result;
};
reader.readAsDataURL(file);
}
}HTML 显示预览：
<img v-if="previewUrl" :src="previewUrl" width="200">多文件上传处理
多选文件输入：
<input type="file" multiple @change="handleMultiUpload">处理多个文件：
methods: {
handleMultiUpload(event) {
const files = Array.from(event.target.files);
const formData = new FormData();
files.forEach(file => {
formData.append('files[]', file);
});
// 上传逻辑
}
}进度显示实现
使用 axios 的 onUploadProgress：
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
this.uploadProgress = percentCompleted;
}
})显示进度条：
<progress :value="uploadProgress" max="100"></progress>
<span>{{ uploadProgress }}%</span>
