Vue 59 ，Element 7 ，el-upload 手动上传图片，Vue2 手动上传图片，el-upload上传单张图片，上传后隐藏上传样式

北城笑笑

已于 2025-04-17 19:47:01 修改

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue Element 文章标签：前端 vue.js elementui

于 2023-10-12 14:48:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65793170/article/details/133745982

Vue 同时被 2 个专栏收录

90 篇文章

订阅专栏

Element

16 篇文章

订阅专栏

本文分享利用Element Plus的el-upload组件实现图片上传功能，包括限制用户只能上传一次图片，上传成功后隐藏上传按钮。介绍了组件配置、直接使用方法，还提及样式属性和事件函数，旨在为开发者提供实用技巧和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在上一期中，我们介绍了如何使用 Element Plus 的 el-upload 组件来实现文件上传功能。这里我们分享如何利用 el-upload 组件专门用于图片上传，并实现一些特定的功能需求：限制用户只能上传一次图片，并在成功上传图片后隐藏上传按钮部分。这不仅能够提升用户体验，还能确保数据的一致性和安全性。通过这次分享，希望能为大家提供实用的技巧和示例代码，帮助大家更高效地实现图片上传功能。

一. 实现效果

二. 配置组件

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

el-upload下载使用https://blog.youkuaiyun.com/weixin_65793170/article/details/132627341?spm=1001.2014.3001.5501

三. 直接使用

下载安装，引入注册后，直接在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="uploadImg_url"
    :headers="headers"
    >
        <!-- 上传按钮 -->
        <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属性为空，上传到接口，还需另行配置。

必要参数：

      // 存储上传的文件列表
      fileList: [],             
      // 诊断图片上传地址
      uploadImg_url: process.env.VUE_APP_BASE_API + "/test/uploads",
      // 上传文件的请求头
      headers: {},

四. 样式属性

相关必要样式和属性介绍，请看

1. 样式

// 隐藏上传按钮
::v-deep .uploadBox_hide .el-upload--picture-card {
    display: none;
}
// 搭配动态 :class 使用
:class="{ uploadBox_hide: hideUploadEdit }" 


这个样式用于，去掉添加/删除文件时的过渡动画
// ::v-deep .el-upload-list__item {
//     transition: none !important;
// }

2. 属性


      :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" //接受上传的文件类型
      list-type="picture-card" //设置文件列表的样式
      :file-list="fileList" //上传的文件列表
      

      :action="uploadImg_url" // 上传地址   
      :headers="headers" // 地址参数

五. 事件函数

上传图片事件的相关事件函数，请看

import { getToken } from '@/utils/auth'
//在created函数中，先获取请求权限
created() {
    // 想办法获取用户Authorization Bearer
    //const Authorization = store.getters.access_token;
    const Authorization = getToken();
    // console.log(Authorization);

    // 这里配置headers，看接口需不需要加Bearer，一般默认情况是需要加的 
    this.headers = { Authorization: `Bearer ` + Authorization };
    // this.headers = { Authorization: Authorization };
},

事件函数，默认如果配置了:auto-upload="true"，选取图片后，会直接调用接口

        // 放大图片
        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;
            //然后数据、逻辑处理
        },