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="" //手动上传不需要填写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;
            //然后数据、逻辑处理
        },

创作不易，感觉有用，就点赞、收藏加关注，感谢(●'◡'●)