vue组件实现上传文件
Vue 组件实现文件上传
使用原生 <input type="file"> 实现基础上传
创建一个 Vue 组件，通过原生文件输入控件实现文件选择：
<template>
<div>
<input type="file" @change="handleFileChange" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedFile: null
};
},
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0];
},
uploadFile() {
if (!this.selectedFile) return;
const formData = new FormData();
formData.append('file', this.selectedFile);
// 替换为实际API端点
fetch('/api/upload', {
method: 'POST',
body: formData
}).then(response => {
console.log('上传成功', response);
}).catch(error => {
console.error('上传失败', error);
});
}
}
};
</script>使用第三方库增强功能（如vue-dropzone）
对于更复杂的需求（如拖拽上传、预览等），可以使用专门的文件上传库：
安装依赖：
npm install vue2-dropzone组件实现：
<template>
<vue-dropzone
ref="dropzone"
id="dropzone"
:options="dropzoneOptions"
@vdropzone-success="uploadSuccess"
></vue-dropzone>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';
export default {
components: {
vueDropzone: vue2Dropzone
},
data() {
return {
dropzoneOptions: {
url: '/api/upload',
thumbnailWidth: 150,
maxFilesize: 10, // MB
headers: { 'Authorization': 'Bearer your_token' }
}
};
},
methods: {
uploadSuccess(file, response) {
console.log('文件上传成功', response);
}
}
};
</script>文件上传进度显示
在原生实现中添加进度监控：
uploadFile() {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (event) => {
const percent = Math.round((event.loaded / event.total) * 100);
console.log(`上传进度: ${percent}%`);
});
xhr.open('POST', '/api/upload', true);
const formData = new FormData();
formData.append('file', this.selectedFile);
xhr.send(formData);
}文件类型和大小验证
在提交前添加验证逻辑：
handleFileChange(event) {
const file = event.target.files[0];
const validTypes = ['image/jpeg', 'image/png'];
const maxSize = 5 * 1024 * 1024; // 5MB
if (!validTypes.includes(file.type)) {
alert('仅支持JPEG/PNG格式');
return;
}
if (file.size > maxSize) {
alert('文件大小不能超过5MB');
return;
}
this.selectedFile = file;
}多文件上传支持
修改代码以支持多文件选择：
<input type="file" multiple @change="handleFilesChange" />对应方法调整：
handleFilesChange(event) {
this.selectedFiles = Array.from(event.target.files);
},
uploadFiles() {
const formData = new FormData();
this.selectedFiles.forEach(file => {
formData.append('files[]', file);
});
// 其余上传逻辑相同
}与后端API集成注意事项
确保后端接口正确处理文件上传：
- 设置正确的 Content-Type (
multipart/form-data) - 处理跨域请求（如需）
- 实现文件存储逻辑（本地磁盘或云存储）
- 返回包含文件访问路径的响应
以上实现方式可根据具体需求进行组合和扩展，建议根据项目复杂度选择原生实现或第三方库方案。
