<template>
<el-form
ref="myFormRef"
:model="myForm"
label-width="100px"
size="medium"
>
<el-upload
:class="{hide:hideUpload}" //绑定class
action="#" //必选参数,上传的地址
list-type="picture-card" //文件列表的类型:text/picture/picture-card
:on-remove="handleRemove" //文件列表移除文件时的钩子
:on-change="onChange" //文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
:limit="limitCount" //最大允许上传个数
:on-success="handleSuccess"//文件上传成功时的钩子
:data="uploadData" //上传时附带的额外参数
:show-file-list="false" //是否显示已上传文件列表
>
<img
class="el-upload-list__item-thumbnail"
v-if="url" //如果图片路径url存在,显示图片
:src="url"
>
<i v-else slot="default" class="el-icon-plus"></i> //如果图片路径url不存在,显示上传+号
</el-upload>
</el-form>
</template>
<script>
export default {
name:'suoLueTu',
data(){
return{
hideUpload: false,
limitCount:1 ,
url:'',
uploadData: {
name: 'testFile',
},
}
},
methods: {
onChange(file, fileList){
this.hideUpload = fileList.length >= this.limitCount;
},
handleRemove(file,fileList){
this.hideUpload = fileList.length >= this.limitCount;
},
handleSuccess(file,fileList) {
this.$set(this.myForm, "netTgThumbnail", fileList.response.bean.result.fileUrlPath)
},
}
}
</script>
引自:“https://www.cnblogs.com/Byme/p/10905731.html”(侵删)