el-upload手动上传图片，上传后隐藏上传样式（el-upload上传单张图片，vue2）

简介：上期介绍了使用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="" //手动上传不需要填写urllist-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;//然后数据、逻辑处理},