<el-upload
ref="uploadDemo"
v-else-if="type == 'file'"
class="upload-demo logo-uploader"
:action="action"
:headers="headers"
:file-list="fileList"
:show-file-list="showFileList"
:on-exceed="exceed"
:limit="limit"
:accept="allowType && allowType.toString()"
:on-success="success"
:on-progress="progress"
:multiple="multiple"
:before-upload="beforeUpload"
>
<div class="logo-uploader-icon">
<div class="upload-box">
<svg-icon icon-class="icon-upload" size="25">
</svg-icon>
</div>
<div class="">{{ btnName }}</div>
</div>
</el-upload>
<template v-if="type == 'file'">
<div class="pdf-item" @click.stop.prevent v-for="(item, index) in fileList" :key="index" style="display: flex;">
<div class="info">
<slot name="icon"></slot>
<span>{{ item.name }}</span>
</div>
<span>
<a href="javascript:;" @click.stop="reloadUpload">重新上传</a>
<a href="javascript:;" class="ml-10" @click.stop="delPdf(index)">删除</a>
</span>
</div>
</template>
data(){
return {
showFileList:false,
}
}
// 重新上传方法
reloadUpload() {
document.querySelector('.el-upload__input').click()
},
// 上传之前
beforeUpload(file) {
let typeName = this.typeName
if (this.type == 'file') {
typeName = '文件'
}
if (this.allowType) {
var index = this.allowType.indexOf(
file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
)
if (index < 0) {
this.$message({
message: `${typeName}格式不正确`,
type: 'warning'
})
return false
}
}
if (this.allowSize) {
// debugger
const b = file.size
let isLtSize = b > this.allowSize * 1024
const sizeStr =
this.allowSize >= 1024
? `${Math.round((this.allowSize / 1024) * 100) / 100}MB`
: `${this.allowSize}KB`
const videoType = [
'.MP4',
'.mp4',
'.mmvb',
'.fliv',
'.avi',
'.3gp',
'.flv'
] // '.MP4', '.mp4', '.mmvb', '.fliv', '.avi', '.3gp', '.flv' 视频默认 50M
let isVideo = false
if (
this.defaultSize &&
videoType.indexOf(
file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
) > 0
) {
isLtSize = file.size > 1024 * 1024 * 50
isVideo = true
}
if (isLtSize) {
if (this.hasVideo && isVideo) {
this.$message.error(`${typeName}不能超过50M哦`)
} else {
this.$message.error(`${typeName}不能超过${sizeStr}哦`)
}
return false
}
}
},
handleRemove(file, fileList) {
this.$emit('handleRemove', file, fileList)
}
重新上传的方法
最新推荐文章于 2024-07-30 15:32:11 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)