<el-upload
class="avatar-uploader"
action=""
ref="upload"
:http-request="handleFileUpload"
:show-file-list="false"
:file-list="fileList"
:before-upload="handleBeforeUpload">
<span class="btn">上传</span>
</el-upload>
<script lang="ts" setup>
let fileList = ref([])
// succuss 、error 在手动上传模式下不能触发钩子
const handleBeforeUpload = (file)=>{
fileList.value = [file]
let fileState = false
let raw = file
if(raw.type.indexOf('.document')>-1){
fileState = true
}else{
ElMessage.error('请上传doc、docx格式的文件!');
fileState = false
return false
}
const isLtSize = raw.size / 1024 / 1024 < 25;
if (!isLtSize) {
ElMessage.error('上传的文件大小不能超过 25MB!');
return false
}
return fileState&&isLtSize
}
const handleFileUpload = (param)=>{
const formData = new FormData()
formData.append('file', param.file)
uploadDoc(formData).then(res => {
if(res.code===200){
ElMessage.success(res.message)
emit('updateFile')
}
}).catch(err=>{
})
}
</script>
el-upload 手动上传
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 一、el-upload手动上传后台接口 手动上传后台接口的核心步骤是1.设置:auto-upload="false...
- 先说明几点:1. 使用Vue 2.x。2. 这几个例子是比较适合我自己项目场景的方案,主要为了记录下,仅供参考。样...