今天就跟大家聊聊有关怎么在Vue中使用ElementUI将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 = file.type === 'application/vnd.ms-excel'
const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileType = isType || isTypeComputer
if(!fileType) {
this.$message.error('上传文件只能是xls/xlsx格式!')
}
// 文件大小限制为10M
const fileLimit = file.size / 1024 / 1024 < 10;
if(!fileLimit) {
this.$message.error('上传文件大小不超过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 = `${this.myBaseURL}/operation/ruleImport/importData` //上传地址
axios.post(url, formData)
.then( res => {
const { data: { code, mark } } = res
if(code === 0) {
param.onSuccess() // 上传成功的文件显示绿色的对勾
this.uploadMark = mark
}
return this.countData(this.uploadMark) //根据响应的 mark 值调用统计结果接口,返回一个promise以便进行链式调用
})
.then( res => { //链式调用,统计结果的响应
const { data: { code, data } } = res
if(code === 0) {
console.log('统计结果', data)
}
})
.catch( err => {
console.log('失败', err)
param.onError() //上传失败的文件会从文件列表中删除
})
},
// 统计结果
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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
看完上述内容,你们对怎么在Vue中使用ElementUI将excel文件上传到服务器有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。