当前位置:   article > 正文

Vue+Springboot实现头像上传_springboot+vue3实现头像上传

springboot+vue3实现头像上传

1、vue引用elementui的头像上传功能:

头像限制为.jpg格式,当选中文件后会自动调用接口,按照官方的文档不发进行文件预览,只能当文件上传成功后才可以返回返回文件进行查阅。 

html代码:

  1. <div class="upload">
  2. <el-upload
  3. :action=avatarUrl
  4. :show-file-list="false"
  5. :on-success="handleAvatarSuccess"
  6. :before-upload="beforeAvatarUpload">
  7. <img v-if="imageUrl" :src="imageUrl" class="avatar">
  8. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  9. </el-upload>
  10. <span>(图片为jpg格式、且不能超过2M)</span>
  11. </div>

js代码: 

  1. handleAvatarSuccess(res, file) {
  2. this.$message.success("修改头像成功")
  3. this.imageUrl =
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/383993
推荐阅读