使用el-upload组件上传没有其他要求时进度条显示是没有问题的,但是要对上传的数据进行特殊处理时(如转成base64等),就需要用自定义上传用http-request方法,这时进度条就不显示了或者显示有问题,查了很多资料大多数是针对单文件上传的,多文件上传几乎没有,于是自己决定实现一个
一、 ui
<el-upload
ref="uploadMutiple"
action=""
:show-file-list="false"
:multiple="true"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">选择文件上传</el-button>
</el-upload>
<el-table :data="uploadFilesList" style="width: 100%">
<el-table-column prop="name" :show-overflow-tooltip="true" label="名称">
<template slot-scope="scope">
<i style="color:#409EFF" class=" el-icon-s-order" />{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column prop="name" label="是否成功" width="300">
<template slot-scope="scope">
<template v-if="scope.row.status==='success'">上传成功!</template>
<template v-else-if="scope.row.status==='error'">上传失败!</template>
<el-progress v-else :percentage="scope.row.progress" />
</template>
</el-table-column>
<el-table-column width="120" prop="size" label="大小" />
<el-table-column prop="name" width="180" :show-overflow-tooltip="true" label="功能">
<template>
<el-button type="primary" size="mini">删除</el-button>
<el-button type="primary" size="mini">下载</el-button>
</template>
</el-table-column>
</el-table>
二 、逻辑
methods: {
beforeUpload(file) {
const fileList = {}
for (const key in file) {
fileList[key] = file[key]
}
// status:uploading、success、error 文件上传状态
// progress 文件上传进度
this.uploadFilesList.push({ ...fileList, progress: 0, status: 'uploading' })
this.httpRequest(file, parms => {
this.showProgress(fileList, parms)
})
// 阻止 el-upload的默认上传
return false
},
showProgress(file, parms) {
const { progress, status } = parms
const arr = [...this.uploadFilesList].map(items => {
if (items.uid === file.uid) {
items.progress = progress
items.status = status
}
return items
})
this.uploadFilesList = [...arr]
},
async httpRequest(file, callback) {
const resBase64 = await getBase64(file)// Base64转码
const params = { base64: resBase64.split(',')[1] }// 组合适合自己的参数
let progress = 0
axios({
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
method: 'post',
url: '******************',
data: params,
onUploadProgress: progressEvent => { // 获取文件上传进度 axios自带的
progress = (progressEvent.loaded / progressEvent.total * 100) | 0
callback({ progress, status: 'uploading' })
}
}).then(() => { // 成功状态
callback({ progress, status: 'success' })
}).catch(() => { // 失败状态
callback({ progress, status: 'error' })
})
}
}
三、base64转码
const getBase64 = file => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
let fileResult = ''
reader.readAsDataURL(file)
// 开始转
reader.onload = () => { fileResult = reader.result }
// 转 失败
reader.onerror = error => { reject(error) }
// 转 结束 咱就 resolve 出去
reader.onloadend = () => { resolve(fileResult) }
})
}