vue api实现导入功能
文件上传组件实现
使用Vue的<input type="file">元素结合@change事件处理文件选择
<template>
<div>
<input type="file" @change="handleFileChange" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
export default {
methods: {
handleFileChange(event) {
this.selectedFile = event.target.files[0]
},
uploadFile() {
if (!this.selectedFile) return
const formData = new FormData()
formData.append('file', this.selectedFile)
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log('上传成功', response.data)
})
}
}
}
</script>Excel文件解析处理
使用xlsx库解析Excel文件内容
import * as XLSX from 'xlsx'
methods: {
parseExcel(file) {
const reader = new FileReader()
reader.onload = (e) => {
const data = new Uint8Array(e.target.result)
const workbook = XLSX.read(data, { type: 'array' })
const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
const jsonData = XLSX.utils.sheet_to_json(firstSheet)
this.$emit('import-complete', jsonData)
}
reader.readAsArrayBuffer(file)
}
}后端API对接
配置Axios实例处理文件上传请求
const api = axios.create({
baseURL: process.env.VUE_APP_API_BASE,
timeout: 10000
})
api.interceptors.request.use(config => {
if (localStorage.token) {
config.headers.Authorization = `Bearer ${localStorage.token}`
}
return config
})进度显示实现
使用Axios的onUploadProgress跟踪上传进度
uploadFile() {
const config = {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
this.uploadProgress = percentCompleted
}
}
api.post('/import', this.formData, config)
.then(response => {
this.$message.success('导入成功')
})
}错误处理机制
添加全面的错误捕获和处理
api.post('/import', formData)
.then(response => {
// 处理成功响应
})
.catch(error => {
if (error.response) {
switch (error.response.status) {
case 413:
this.$message.error('文件大小超过限制')
break
case 415:
this.$message.error('不支持的文件类型')
break
default:
this.$message.error('导入失败')
}
} else {
this.$message.error('网络错误')
}
})组件封装建议
创建可复用的导入组件
<template>
<div class="importer">
<file-upload @file-selected="handleFile"/>
<progress-bar :value="progress"/>
<preview-table v-if="previewData" :data="previewData"/>
</div>
</template>
<script>
export default {
props: {
accept: {
type: String,
default: '.xlsx,.csv'
}
},
data() {
return {
progress: 0,
previewData: null
}
}
}
</script>
