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

亦凉 2024-04-22 22:28 85阅读 0赞

#### 简介：上期介绍了使用el-upload上传文件，这次来介绍一下如何使用el-upload上传图片，只能上传一次，上传图片后隐藏上传按钮部分。 ####

**实现效果图：**

![a5b95002a1714df4adc63b8ed137b0cb.gif][]

**1、首先，想要在项目中使用el-upload组件，同样，得保证项目中已经安装且引入了该组件，具体安装及引入可见上篇文章。**

[el-upload下载使用![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://blog.csdn.net/weixin\_65793170/article/details/132627341?spm=1001.2014.3001.5501][el-upload_icon-default.png_t_N7T8_icon-default.png_t_N7T8_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=""
 >
 
 
 
 <div slot="file" slot-scope="{file}">
 <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
 
 
 
 
 
 
 
 
 
 
 </div>
 </el-upload>

**当然，上传处也可以换成按钮或者其它，像这样，**

![37d4dcb620d8486a83b95ac5d858b8b8.png][]

**上传处替换成按钮，代码多去少补，**

<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">
 上传图片
 
 </el-button>
 
 <div slot="file" slot-scope="{file}">
 <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
 
 
 
 
 
 
 
 
 
 
 </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;
 //然后数据、逻辑处理
 },

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

[a5b95002a1714df4adc63b8ed137b0cb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e9c2d9d7d3494c919b946b4429140d00.gif
[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[el-upload_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_blog.csdn.net_weixin_65793170_article_details_132627341_spm_1001.2014.3001.5501]: https://blog.csdn.net/weixin_65793170/article/details/132627341?spm=1001.2014.3001.5501
[37d4dcb620d8486a83b95ac5d858b8b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e1894d04e94c48279a13c4b3952e8149.png