样式

<el-upload

action="file_upload"//上传地址

:http-request="uploadFile" //上传接口函数

list-type="picture-card" //方块卡片形式

:limit="1"//最大限制上传数量

:class="{hide:hideUploadBtn}" //超过上传数量，上传按钮隐藏

:file-list="baseForm.attach_list" //文件数组

:before-upload="beforeAvatarUpload" //上传前函数：比如上传类型、大小判断

:on-preview="handlePictureCardPreview" //点击放大图片

:on-change="handleEditChange" //图片变化时：可控制上传按钮不显示

:on-remove="handleRemove"//删除图片时：可控制上传按钮不显示

accept="."> //可接受的上传样式

<imgv-if="imageUrl":src="imageUrl"class="avatar"> 上传按钮显示的图片

<iv-elseclass="el-icon-plusavatar-uploader-icon"></i> 上传按钮显示+形状

</el-upload>

对应js：

/*-----------------------------上传相关-----------------------------*/

//点击图片放大图片

handlePictureCardPreview(file){

this.dialogImageUrl=file.url;

this.dialogVisible=true;

},

//移除图片操作,控制上传按钮不显示

handleRemove(file,fileList){

////fileList为移除后剩余的图片数组赋值给this.fileList则展示正确

//this.baseForm.attach_list=fileList;

//上传图片>n则隐藏上传组件

this.hideUploadBtn=fileList.length>=1;

},

//最多上传n张图，超过时隐藏上传按钮

handleEditChange(file,fileList){

this.hideUploadBtn=fileList.length>=1;

},

css样式

//超过上传限制时，上传按钮不显示。

.hide{

/deep/.el-upload--picture-card{

display:none!important;

}

}

//去掉过渡动画，不然删除操作的时候，布局会闪一下。

/deep/.el-upload-list__item{

transition:none!important

}

多个upload并排显示

el-upload提取出公共组件，然后想多个upload并排显示，

如果多个upload外面没有div包裹，需要每个upload都设置display：inline多个upload外有div包裹，外层div设置dispaly：flex

elementUI el-upload使用方法 上传限制数量且超出不显示上传按钮 删除闪一下 多个upload并排显示