vue实现上传文件案例
Vue 文件上传实现
使用 Vue 实现文件上传可以通过原生 HTML 的 <input type="file"> 或第三方库（如 axios、vue-dropzone）完成。以下是两种常见实现方式：
原生 HTML 文件上传
通过 <input type="file"> 结合 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];
},
submitFile() {
if (!this.file) return;
const formData = new FormData();
formData.append('file', this.file);
// 使用 axios 发送请求
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response.data);
}).catch(error => {
console.error('上传失败', error);
});
}
}
};
</script>使用第三方库（如 vue-upload-component）
对于更复杂的需求（如多文件上传、拖拽上传），可以使用专门的 Vue 上传组件。
-
安装依赖：
npm install vue-upload-component -
组件实现：
<template> <div> <file-upload ref="upload" :auto="false" :multiple="true" @input-file="handleInputFile" @input-filter="handleInputFilter" > 选择文件 </file-upload> <button @click="startUpload">开始上传</button> </div> </template>
export default { components: { FileUpload }, methods: { handleInputFile(newFile, oldFile) { if (newFile && !oldFile) { console.log('新增文件', newFile); } }, handleInputFilter(newFile, oldFile) { if (newFile && !oldFile) { // 文件类型过滤 if (!/.(jpg|png)$/i.test(newFile.name)) { return false; } } return newFile; }, startUpload() { this.$refs.upload.active = true; } } };
```后端接口注意事项
- 确保后端接口支持
multipart/form-data格式。 - 若使用 Node.js（如 Express），可通过
multer中间件处理：const multer = require('multer'); const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('file'), (req, res) => { console.log(req.file); // 文件信息 res.send('上传成功'); });
#### 常见问题处理
- 文件大小限制：通过 `axios` 的 `onUploadProgress` 监听进度，或后端限制。
- 文件类型验证：在 `input` 中添加 `accept` 属性（如 `accept="image/*"`），或在提交前校验。
- 跨域问题：确保后端配置 CORS 头部（如 `Access-Control-Allow-Origin`）。
以上方法可根据实际需求调整，例如添加进度条、预览功能或断点续传。
