Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
页面代码
</el-form>
<el-form-item>
<form id="upload" enctype="multipart/form-data" method="post">
<el-upload
ref="upload"
class="upload-demo"
action="#"
:http-request="UploadImage"
:on-change="fileChange"
:before-upload="beforeUpload"
>
<!-- :before-upload="beforeUpload"-->
<el-button size="small" type="primary" class="el-icon-upload"> 数据上传</el-button>
<!-- <div-->
<!-- slot="tip"-->
<!-- class="el-upload__tip"-->
<!-- >只能上传db文件,且不超过一个</div>-->
</el-upload>
</form>
</el-form-item>
<!-- <el-progress v-if="progressFlag" />-->
<el-form-item label="当前文件上传进度">
<el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" />
</el-form-item>
</el-form>
script部分
引入axios
import axios from 'axios'
methods代码片段
UploadImage(param) {
if (this.filterForm.documentType === '') {
this.$message({
message: '请选择档案类型后并重新上传',
type: 'warning'
})
return
} else if (this.filterForm.regTargetArea === '') {
this.$message({
message: '请选择区县后并重新上传',
type: 'warning'
})
return
} else {
// 上传新文件时,将进度条值置为零
this.progressPercent = 0
this.progressFlag = true
const formdata = new FormData()
formdata.append('documentType', this.filterForm.documentType)
formdata.append('upload', param.file)
axios({
url: 'url?token=' + this.$store.getters.token,
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: progressEvent => {
// progressEvent.loaded:已上传文件大小
// progressEvent.total:被上传文件的总大小
this.progressPercent = (progressEvent.loaded / progressEvent.total * 100)
console.info(progressEvent.loaded)
console.info(progressEvent.total)
}
}).then(response => {
if (response.data.rel) {
this.$message({
message: '文件上传成功',
type: 'success'
})
// if (this.progressPercent === 100) {
// this.progressFlag = false
// this.progressPercent = 0
// }
this.logData.upUploadStatus = 1 // 是否上传成功 1 成功 0失败
} else {
this.logData.upUploadStatus = 0
}
this.logData.upRegion = this.filterForm.regTargetArea // areacode
this.logData.upFileUrl = response.data.filePath // 上传文件存储路径
this.logData.upQueryType = this.filterForm.documentType // 档案类型id
this.logData.upUploadFileSize = response.data.fileSize // 文件大小
this.logData.upUploadFileName = response.data.fileName // 文件名
// 文件上传成功后添加日志
addUpload(this.logData).then(item => {
console.log('新增文件上传统计日志成功')
}).catch(res => {
console.log('新增文件上传统计日志失败')
})
param.onSuccess() // 上传成功的文件会显示绿色的对勾
}).catch(response => {
this.$message({
message: '文件上传失败',
type: 'warning'
})
}).then(error => {
console.log(error)
})
}
}
axios请求后台时,如有鉴权机制记得带上token
文件上传前做文件类型检查
beforeUpload(file) {
console.log(file)
const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg === 'db'
// const isLt2M = file.size / 1024 / 1024 < 10
if (!extension) {
this.$message({
message: '上传文件只能是db格式!',
type: 'warning'
})
}
// if(!isLt2M) {
// this.$message({
// message: '上传文件大小不能超过 10MB!',
// type: 'warning'
// });
// }
// return extension || extension2 && isLt2M
return extension
}
附上效果图(进度条是实时动态的)
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)