vue3使用el-upload(elmentplus)更改用户头像，用到了七牛云，0积分下载资源，见文末

最新推荐文章于 2025-03-13 19:07:50 发布

慕斯、

最新推荐文章于 2025-03-13 19:07:50 发布

阅读量1k

点赞数 1

分类专栏：笔记文章标签： java 前端 javascript vue.js elementui

本文链接：https://blog.csdn.net/weixin_46072203/article/details/125109972

版权

笔记专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何在Vue应用中使用el-upload组件实现用户头像上传功能，结合七牛云服务进行文件存储。前端部分包括组件配置、上传成功回调和文件大小限制。后端使用Java实现，通过七牛云工具包上传文件，并更新用户头像信息。代码中包含关键的前端和后端实现细节。

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

使用el-upload上传用户头像 0积分下载资源，见文末

效果图

前端代码

 <el-upload
     class="avatar-uploader"
     :action="uploadUrl"
      accept=".jpg,.png,.jpeg"
      show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
   >
      <el-image v-if="avator" :src="avator" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>

//ts部分
export default {
  setup() {
    const store = useStore();

    const avator = ref(store.state.avator);//图片显示
    //可以将userid换成自己的参数
    const uploadUrl = ref("/api/upload/images?userid=" + store.state.userid);

    const handleAvatarSuccess: UploadProps["onSuccess"] = (
      response,
      uploadFile
    ) => {
      avator.value = URL.createObjectURL(uploadFile.raw!);
      //更新sessionStorage和vuex
      sessionStorage.setItem("avator", avator.value);
      store.state.avator = avator.value;
    };
    const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
      if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("图片不能超过2MB!");
        return false;
      }
      return true;
    };

    return {
      avator,
      uploadUrl,
      handleAvatarSuccess,
      beforeAvatarUpload,
    };
  },
};

后端代码

用到了七牛云 QiniuUtil工具包文件上传的配置见章节末

@RestController
@RequestMapping("/api/upload")
public class UploadController {

    @Resource
    private QiniuUtil qiniuUtil;
    @Resource
    private ConsumerServiceImpl consumerService;

    /**
     * 头像文件上传
     *
     * @param file
     * @return
     * @throws Exception
     */
    @PostMapping("/images")
    public Result<?> uploadImages(@RequestParam("userid") Integer userid, MultipartFile file) throws Exception {
//        Result<?> result = new Result<>();
        String url;
        int flag;//更新成功标志
        if (file == null) {
            return Result.error("405", "上传错误", null);
        }
        try {
            byte[] bytes = file.getBytes();//将文件转化为 byte[] 格式
            String name = UUID.randomUUID().toString().replace("-", "");//更改后的文件名
            String ext = FilenameUtils.getExtension(file.getOriginalFilename());//获取文件后缀
            String ur = name + "." + ext;
            url = qiniuUtil.uploadBybyte(bytes, ur);

            //将url更新为该用户的头像，更新数据库
            flag = consumerService.updateAvator(userid, url);

            if (flag == 1) {
                return Result.success(url);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        //System.out.println(url + " 图片地址");
        return Result.error("405", "更新失败", null);

    }
}