详解VueElementUI⼿动上传excel⽂件到服务器
⽬录
概述
属性设置
处理逻辑
概述
具体需求场景如下：
选择excel⽂件后，需要把导⼊的excel⽂件⼿动上传到后台服务器，并将导⼊成功后的统计结果显⽰出来。官⽹也有⼿动上传的⽰例，通过 action="url" 传⼊地址的⽅式，但在实际项⽬中请求需要⾃⼰配置，下⾯具体说明实现的⽅法。
说明：
在上传⽂件到展⽰统计结果，我们后端给了两个接⼝：⾸先调⽤⽂件上传接⼝，上传成功后，根据后端返
回的mark再调⽤统计结果接⼝。
属性设置
.vue⽂件
<el-row>
<div class="el-form-item__content">
<el-upload ref="upload"
accept=".xls,.xlsx"
action="#"
:auto-upload="false"
:multiple="false"
:file-list="fileList"
:
before-upload="beforeUpload"
:http-request="uploadHttpRequest"
:on-remove="fileRemove"
:on-change="fileChange">
<el-button size="small" type="primary">选择⽂件</el-button>
<div slot="tip" class="el-upload__tip">⼀次只能上传⼀个xls/xlsx⽂件，且不超过10M</div>
服务器
</el-upload>
</div>
</el-row>
<el-row>
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button type="primary" size="small" @click="submitUpload">上传</el-button>
<el-button type="primary" size="small" @click="downloadRes">下载反馈结果</el-button>
</el-row>
其中：
action：上传的地址，可以不⽤过多关注，但也不建议删除，可⽤普通字符串代替
auto-upload：是否⾃动上传，因这⾥是⼿动上传，所以设置为false
multiple：是否⽀持多选，此处设置为 false
file-list：上传的⽂件列表数组
before-upload：上传⽂件之前的钩⼦，参数为上传的⽂件，可以在这⾥判断上传⽂件的类型，⽂件⼤⼩等
http-request：⾃定义上传的⽅法，会覆盖默认的上传⾏为（即action="url"）
on-remove：上传⽂件移除时触发的⽅法
on-change：上传⽂件状态（添加，上传成功或失败）改变时触发的⽅法
处理逻辑
逻辑处理代码如下：
methods: {
// 上传⽂件之前的钩⼦：判断上传⽂件格式、⼤⼩等，若返回false则停⽌上传
beforeUpload(file) {
//⽂件类型
const isType = pe === 'application/vnd.ms-excel'
const isTypeComputer = pe === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileType = isType || isTypeComputer
if(!fileType) {
this.$('上传⽂件只能是xls/xlsx格式！')
}
// ⽂件⼤⼩限制为10M
const fileLimit = file.size / 1024 / 1024 < 10;
if(!fileLimit) {
this.$('上传⽂件⼤⼩不超过10M！');
}
return fileType && fileLimit
},
// ⾃定义上传⽅法，param是默认参数，可以取得file⽂件信息，具体信息如下图
uploadHttpRequest(param) {
const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
formData.append('file', param.file) //添加⽂件对象
formData.append('uploadType', this.rulesType)
const url = `${BaseURL}/operation/ruleImport/importData` //上传地址
axios.post(url, formData)
.then( res => {
const { data: { code, mark } } = res
if(code === 0) {
this.uploadMark = mark
}
untData(this.uploadMark) //根据响应的 mark 值调⽤统计结果接⼝，返回⼀个promise以便进⾏链式调⽤            })
.then( res => { //链式调⽤，统计结果的响应
const { data: { code, data } } = res
if(code === 0) {
console.log('统计结果', data)
}
})
.catch( err => {
console.log('失败', err)
})
},
// 统计结果
countFile(mark) {
return new Promise((resolve, reject) => {
axios
.get(`/operation/ruleImport/countData?mark=${mark}`)
.then(res => {
resolve(res)
})
.catch(error => {
reject(error)
})
})
},
// 点击上传：⼿动上传到服务器，此时会触发组件的http-request
submitUpload() {
this.$refs.upload.submit()
},
// ⽂件发⽣改变
fileChange(file, fileList) {
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]] // 展⽰最后⼀次选择的⽂件
}
},
// 移除选择的⽂件
fileRemove(file, fileList) {
if(fileList.length < 1) {
this.uploadDisabled = true //未选择⽂件则禁⽤上传按钮
}
},
// 取消
closeDialog() {
this.$refs.upload.clearFiles() //清除上传⽂件对象
this.fileList = [] //清空选择的⽂件列表
this.$emit('close', false)
}
}
http-request 的param参数，打印结果如图。通过param.file取得当前⽂件对象。
以上就是详解Vue ElementUI⼿动上传excel⽂件到服务器的详细内容，更多关于Vue ElementUI⼿动上传excel⽂件到服务器的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。