<template>
<el-upload
class="upload-demo"
style="width: 100px"
name="formFile"
action="/dev-api/user/uploadfile?type=Company"
:on-success="handleAvatarSuccess"
:on-change="handleChangeFile"
:show-file-list="false"
:file-list="companyForm.businessPicture"
:multiple="false"
>
<el-tooltip class="item" effect="dark" content="只能上传jpg/png文件,且不超过2MB" placement="bottom">
<i v-if="formType === 'add'&& !uploadingSuccess" class="el-icon-upload2 upload-icon"></i>
<span class="uploadAgain">重新上传</span>
</el-tooltip>
</el-upload>
</template>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/25f012dc48370d570242d343245840de.png)
<script>
data(){
return{
companyForm:{
businessPicture:[]
}
}
},
methods:{
handleAvatarSuccess(res, file) {
if(res.code === 200 && res.data.name && res.data.url){
this.viewdFormData.credentialsUrl=res.data.url
this.uploadingSuccess=true
this.$message({
message: "上传成功",
type: "success",
});
}
},
handleChangeFile(file,fileList){
const imgType = file.raw.type === 'image/png'||file.raw.type === 'image/jpeg';
const imgSize = file.raw.size/1024/1024 <= 2;
if(!imgType){
this.$message.error("只能上传png、jpg、jpeg的图片格式!");
return false;
}
if(!imgSize){
this.$message.error("图片上传最大限制2MB!");
return false;
}
if(fileList.length>1){
fileList.splice(0,1);
}
},
},
</script>