简介：上期介绍了使用el-upload上传文件，这次来介绍一下如何使用el-upload上传图片，只能上传一次，上传图片后隐藏上传按钮部分。
实现效果图：
1、首先，想要在项目中使用el-upload组件，同样，得保证项目中已经安装且引入了该组件，具体安装及引入可见上篇文章。
el-upload下载使用
https://blog.csdn.net/weixin_65793170/article/details/132627341?spm=1001.2014.3001.5501
2、然后直接在vue组件中使用。
<el-upload
class="upload_box"
ref="upload"
:limit="limitNum"
:class="{ uploadHide: hideUploadEdit }"
:on-change="handleEditChange"
:http-request="ImgUploadSectionFile"
:before-upload="beforeAvatarUpload"
:with-credentials="true"
:auto-upload="true"
accept=".png, .jpg"
list-type="picture-card"
:file-list="fileList"
action=""
>
<!-- 加号标识 -->
<i slot="default" class="el-icon-plus"></i>
<!-- 上传后显示 -->
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<!-- 图片放大 -->
<span class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<!-- 图片放大 -->
<span v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>当然，上传处也可以换成按钮或者其它，像这样，
上传处替换成按钮，代码多去少补，
<el-upload
class="upload_box"
ref="upload"
:limit="limitNum"
:class="{ uploadHide: hideUploadEdit }"
:on-change="handleEditChange"
:http-request="ImgUploadSectionFile"
:before-upload="beforeAvatarUpload"
:with-credentials="true"
:auto-upload="true"
accept=".png, .jpg"
:file-list="fileList"
action=""
>
<!-- 上传按钮 -->
<el-button
class="upload_btn"
slot="trigger"
size="small"
type="primary">
上传图片
<i class="el-icon-upload el-icon--right"></i>
</el-button>
<!-- 上传后显示 -->
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<!-- 图片放大 -->
<span class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<!-- 图片放大 -->
<span v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>因为这里是本地图片测试上传，所以组件中的action属性为空，上传到接口，还需另行配置。
3、相关必要样式和属性介绍。
// 隐藏上传按钮
::v-deep .uploadBox_hide .el-upload--picture-card {
display: none;
}
// 搭配动态 :class 使用
:class="{ uploadBox_hide: hideUploadEdit }"
这个样式用于，去掉添加/删除文件时的过渡动画
// ::v-deep .el-upload-list__item {
// transition: none !important;
// }
:limit="limitNum" //最大允许上传个数
:class="{hide:hideUploadEdit}" //加类名为了隐藏上传样式
:on-remove="handleRemove" //文件列表移除文件时的钩子
:on-change="handleEditChange" //文件状态改变时的钩子(可以限制文件数量和文件大小)
:http-request="ImgUploadSectionFile" //覆盖默认的上传行为，实现手动上传
:before-upload="beforeAvatarUpload" //上传文件之前的钩子
:with-credentials="true" //支持发送 cookie 凭证信息
:auto-upload="true" //是否在选取文件后立即进行上传(不知什么原因false没效果)
accept=".png, .jpg" //接受上传的文件类型
action="" //手动上传不需要填写url
list-type="picture-card" //设置文件列表的样式
:file-list="fileList" //上传的文件列表4、上传相关事件。
// 放大图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 删除图片
handleRemove(file, fileList) {
if (this.fileList.length === 0) {
this.fileList = [];
} else {
let dl = this.fileList.indexOf(file);
this.fileList.splice(dl, 1);
}
this.hideUploadEdit = this.fileList.length >= this.limitNum;
},
// on-change添加文件，上传成功和上传失败时都会被调用
handleEditChange(file, fileList) {
this.hideUploadEdit = fileList.length >= this.limitNum;
// console.log("this.fileList:", this.fileList);
// console.log("this.hideUploadEdit:", this.hideUploadEdit);
},
// http-request自定义上传
ImgUploadSectionFile(param) {
this.param = param;
},
// before-upload上传文件之前的钩子，参数为上传的文件
// 若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
}
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
// 文件上传成功时的钩子
handleSuccess(file) {
// console.log(file);
const data = file.data;
//然后数据、逻辑处理
},