elementui实现文件上传,element ui 文件上传
本文主要介绍Vue ElementUI手动上传excel文件到服务器的详细说明。对ElementUI感兴趣的同学可以参考一下。
目录
属性设置处理逻辑的概述
概述
具体需求场景如下：
选择excel文件后，需要手动将导入的excel文件上传到后台服务器，并在导入成功后显示统计结果。还有一个官网手动上传的例子，地址通过action=url 传入，但是实际项目中的请求需要自己配置。下面详细介绍实现方法。
描述：
从上传文件到显示统计结果，我们后端给出了两个接口：首先调用文件上传接口，然后根据后端返回的标记调用统计结果接口。
属性设置
。vue文件
el-row
div class= El-form-item _ _ content
El-上传引用=上传
接受=。xls，xlsx
action=#
:自动上传=false
:multiple=false
:file-list=fileList
:上传前=上传前
:http-request= upload http request
: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-上传
/div
/el-row
el-row
El-button size= small @ click= close dialog 取消/el-button
El-button type= primary size= small @ click= submit upload 上传/el-button
El-button type= primary size= small @ click= downloadres 下载反馈结果/el-button
/el-row
其中包括：
动作：上传的地址可以忽略，但不建议删除。可以用普通的字符串代替。
自动上传：是否自动上传，因为这里是手动上传，所以设置为false。
Multiple:是否支持多选，此处设置为false。
File-list:列出上传文件的数组。
上传前：上传文件前的钩子，参数是上传的文件，在这里可以判断上传文件的类型和大小。
Http-request:用户定义的上传方法将覆盖默认上传行为(即action=url )
On-remove:删除上传文件时触发的方法。
On-change:当上传文件的状态(添加、上传成功或失败)改变时触发的方法。
处理逻辑
逻辑代码如下：
方法：{
//上传文件前钩子：判断上传文件的格式和大小，如果返回false则停止上传。
上传前(文件){
//文件类型
const isType=file . type=== application/vnd . ms-excel
const isTypeComputer=file . type=== application/vnd . openxml formats-office document . spreadsheetml . sheet
const fileType=isType isTypeComputer
如果(！文件类型){
这个。$message.error(上传的文件只能是xls/xlsx格式！)
}
//文件大小限制为10M
const file limit=file . size/1024/1024 10；
如果(！文件限制){
这个。$message.error(上传文件大小不超过10M！);
}
返回文件类型文件限制
},
//自定义上传方法，param为默认参数，可以获取文件信息。具体信息如下
uploadHttpRequest(param) {
constformdata=new formdata()//formdata对象，添加的参数只能以append(key ，value)的形式添加
Formdata.append (file ，param . file)//添加文件对象
formData.append(uploadType ，this.rulesType)
const URL=` $ { this . mybase URL }/operation/rule import/import data `//上传地址
axios.post(url，formData)。然后(res={
const { data: { code，mark } }=res
if(code===0) {
Param.onSuccess() //上传成功的文件显示绿色复选标记。
this.uploadMark=mark
}
return . count data(this . upload mark)//根据响应的标记值调用统计结果接口，返回一个连锁调用的承诺。
})。然后(res={//链式调用，统计响应结果
const { data: { code，data } }=res
if(code===0) {
Console.log(统计结果，数据)
}
})。catch(错误={
Console.log(失败，错误)
Param.onError() //上传失败的文件将从文件列表中删除。
})
},
//统计结果
计数文件(标记){
返回新承诺((解决，拒绝)={
爱可信。get(`/operation/rule import/count data？mark=${mark} `)。然后(res={
解析(分辨率)
})。catch(错误={
拒绝(错误)
})
})
},
//点击上传：手动上传到服务器，触发组件的http-request。
submitUpload() {
这个。$refs.upload.submit()
},
//文件已经更改。
fileChange(文件，文件列表){
if (fileList.length 0) {
this . file list=[file list[file list . length-1]]//显示最后选择的文件
}
},
//删除选定的文件
fileRemove(文件，文件列表){
if(fileList.length 1) {
This.uploadDisabled=true //如果没有选择文件，上传按钮将被禁用。
}
},
//取消
closeDialog() {
这个。$ refs . upload . Clear files()//清除上传的文件对象
This.fileList=[] //清空选中的文件列表
这个。$emit(close ，false)
}
}
http-request的Param参数，打印结果如图所示。通过param.file获取当前文件对象
以上是Vue ElementUI如何手动上传excel文件到服务器的详细说明。关于Vue ElementUI如何手动上传excel文件到服务器的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。