原文链接:https://blog.csdn.net/sinat_16463137/article/details/79227564
在原文的基础上做了少量修改。
首先附一个官方upload的地址 http://element-cn.eleme.io/#/zh-CN/component/upload
其中有上传多张和不同样式列表的例子,只是在【用户上传头像】这个例子中,在下并没有成功的使用。
会出现显示不出已上传的图片无法显示缩略图,无法调整缩略图的位置。
所以我不想深究,直接用【照片墙】这个例子往上怼。这个例子上上传多张的,因为之前做过上传多张的项目,所以比较轻车熟路。
先说一下我的思路,大概就是在上传了一张以后将上传组件隐藏(还有更好的思路可以交流),于是我在调试器中找了上传组件的样式 el-upload--picture-card
只要在检测到上传列表中已经有一张图片时,就隐藏上传组件,只展示上传列表。
那么就可以给整个上传组件一个class名称,这个class没有任何样式,只是做选择器用。
比如:disabled
那么就在监测到上传一张后,隐藏disabled 下面的 el-upload--picture-card
思路大概就是这样,下面跟demo↓↓↓↓↓↓
话不多说直接上代码:
先定义变量 uploadDisabled=''
<el-upload
:class="uploadDisabled"
:action="handleUploadUrl"
with-credentials
:file-list="fileList"
list-type="picture-card"
:data="attachmentData"
:headers="handleHeader"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:disabled="showdisabled"
:before-upload="beforeAvatarUpload">
<i class="el-icon-plus"></i>
</el-upload>
<script>
export default {
name: 'singleImage',
data() {
return {
showdisabled:false,
uploadDisabled:'',
attachmentData: {type: 1, objectId: null},//上传文件类型为营业执照图片
attachmentId: [],// 存储上传之后后台传过来的ID
fileList: [],
handleUploadUrl: process.env.BASE_API+'/attachment',
handleHeader: {'jy-token' : getToken()},
}
},
handleAvatarSuccess(res, file) {
this.attachmentId.push(res.id);
//上传图片后将 uploadDisabled 变量设置为 disabled
if(this.attachmentId.length>0){
this.uploadDisabled='disabled'
}
},
handleRemove(file, fileList) {
this.attachmentId = this.attachmentId.filter(function(val) {
//根据文件路径,截取获取文件在附件表的ID
const i1 = file.url.indexOf("="); //1
const i2 = file.url.indexOf("&"); //2
const resultStr = file.url.slice(i1+1,i2);
if(val == resultStr) {
return false;
} else {
return val;
}
});
//将变量置空
this.uploadDisabled=''
},
后面加上 class 为 disabled 的样式,注意此处将样式写到不加 scoped 的样式中。
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<style rel="stylesheet/scss" lang="scss">
.disabled .el-upload--picture-card{
display: none;
}
</style>
uploadDiseabled 会根据上传列表的长度动态的给upload的组件添加样式,进而将达到只上传一张的效果。然后这个方法也可以用于限制上传张数。