使用element ui-upload组件上传头像

爱恰鸡米花

于 2021-06-01 17:01:41 发布

阅读量1.8k

点赞数 5

本文链接：https://blog.youkuaiyun.com/weixin_44542401/article/details/117446381

版权

本文记录了使用Element UI的upload组件在Vue前端实现头像上传，并结合Spring Boot后台完成上传流程的详细步骤。包括前端上传前的图片校验和上传成功后的后台响应处理。

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

这个头像上传的问题其实困扰我挺久的，我也查了很多的资料可多数都不是我想要的结果。查到有关的也只是模棱两可。以下是我上传成功的全过程希望对你有帮助
这是element upload官网组件

vue前端

这个是我从官网拷贝过来的（改了一点）

<el-upload  action="http://localhost:8181/123/123/"
                     :before-upload="beforeAvatarUpload"
                     :on-success="handleAvatarSuccess"
                     :data="{id:scope.row.id}">
            <el-button size="mini" >更新头像</el-button>
          </el-upload>
          
//action:是你要上传图片的路径
//beforeAvatarUpload:是你上传图片前的校验方法
//handleAvatarSuccess:是你上传图片之后要执行的操作
//因为我修改的是一行数据，所以我要传一个id给后台
//:data:是element参数就是为传参提供的

在这里插入图片描述

我的效果图为：
在这里插入图片描述
这个上传图片之前的校验方法是我直接官网考的

/*上传图片之前的校验*/
    beforeAvatarUpload(file){
   
      //上传文件的格式
      const idJPG=(file.type==='image/jpeg')||(file.type==='image/png');
      //上传文件的大小
      const isLt2M = (file.size

最低0.47元/天解锁文章