vue+elementUI实现图片上传不显示添加按钮

vue

先上效果图：

HTML代码：

<el-upload

action="https://jsonplaceholder.typicode.com/posts/"

list-type="picture-card"

:class="{hide:hideUpload}"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:before-upload="beforeAvatarUpload"

:on-change="changeimg"

:limit="1"

</el-upload>

<el-dialog :visible.sync="dialogVisible">

</el-dialog>

<div>

</div>

<div>

<span>只支持JPG、PNG、大小不超过5M</span>

</div>

JS代码：

handleRemove(file, fileList) {

console.log(file, fileList);

this.hideUpload = fileList.length >= this.limitCount;

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible = true;

changeimg(file, fileList) {

this.hideUpload = fileList.length >= this.limitCount;

beforeAvatarUpload(file) {

const isJPG = file.type === "image/jpeg";

const isPNG = file.type === "image/png";

const isLt2M = file.size / 1024 / 1024 < 5;

if (!(isJPG || isPNG)) {

this.$message.error("上传头像图片只能是 JPG 格式!");

}

if (!isLt2M) {

this.$message.error("上传头像图片大小不能超过 5MB!");

}

return (isJPG || isPNG) && isLt2M;

}

limitCount是上传数量，我这里指定了1张，那么上传一张就隐藏了添加按钮，如果是需要上传2张之后再隐藏只需要改成2就OK了