一、使用elementUI构建后台管理系统如何上传一张图片和多张图片和删除一张图片和删除多张图片中的的某一张
二、上传一张图片后如何关闭"+"这个按钮:
首先,给el-upload加一个limit属性和一个class类名,limit限制上传图片的数量,class需要动态绑定类名,在data中定义一个变量uploadDisabled,默认为false,当上传一张图片的时候会触发on-change钩子函数的appChangeFile方法,该方法含有两个参数(file,fileList),fileList是在data中定义的一个用来存储图片的数组,在该方法中对存储图片的数组进行判断,如果数组长度大于等于1,说明上传了一张图片,将动态绑定类名的状态改为true,也就是让’+‘不显示。
一、使用el-upload组件--------------上传一张图片,上传一张图片后,隐藏加号(继续上传的按钮),功能只有删除,没有预览,删除使用了el-upload组件的方法:on-remove
1.代码,上传一张图片的代码
action:上传图片的地址,没有可以写’#’
list-type:上传文件的类型,设置文件列表的样式
file-list:上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}],是一个数组,需要在data中定义
multiple:是否支持多张上传
auto-upload:是否支持自动上传
on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
<el-form-item label="app图片">
<el-upload
action="#"
list-type="picture-card"
:on-change="appChangeFile"
:file-list="fileList"
:multiple="false"
:auto-upload="false"
ref="prodimg"
:class="{ disabled: uploadDisabled }"
:limit="1"
:on-remove="handleRemoveApp"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="tip" style=