vue项目中上传头像的简易方法（一）

最新推荐文章于 2025-03-14 16:50:18 发布

LLDD。

最新推荐文章于 2025-03-14 16:50:18 发布

阅读量1.3w

点赞数 18

分类专栏： vue html 文章标签： vue 上传头像

本文链接：https://blog.youkuaiyun.com/LLDD2014425/article/details/88314417

版权

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文详细介绍了一名前端开发者如何实现上传头像功能，包括格式筛选、大小限制、尺寸比例等关键需求，并提供了HTML、CSS及JavaScript的具体代码实现。

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

作为一名代码届的前端码农，上传头像这样的功能肯定是见怪不怪了，
这两天有点儿空余时间，整理了一下上传头像的功能实现方法。

首先考虑上传的相关需求要求

(1) 格式要求（jpg | png | jpeg | gif ）
(2) 大小要求（比如不超过300kb）
(3) 尺寸大小限制（1:1，4:9，9:16）
(4) 是否可以裁剪
(5) 单张还是多张（单张一般用在用户头像）
…

具体例子来解决问题

1、html部分

<template>
  <div class="hello">
    <div class="user-header">
      <input type="file" name="image" accept="image/*" @change='onchangeImgFun'
       class="header-upload-btn user-header-com">
      <img  alt="" :src='imgStr' class="user-header-img user-header-com">
      <p class="tip">图片限制50kb <span class="error">{{errorStr}}</span></p>
    </div>
  </div>
</template>
<!-- input 的accept属性可以用来解决格式筛选问题 -->

2、css部分

<style scoped>
.user-header{
  position: relative;
  display: inline-block;
}
.user-header-com{
  width: 144px;
  height: 144px;
  display: inline-block;
}
.header-upload-btn{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
}
.tip{
  font-size: 14px;
  color: #666;
}
/* error是用于错误提示 */
.error{
  font-size: 12px;
  color: tomato;
  margin-left: 10px;
}
</style>

3、js部分

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      imgStr: require('../assets/upload.png'),
      errorStr: ''
    }
  },
  methods: {
    onchangeImgFun (e) {
      var file = e.target.files[0]
      console.log(file)
      // 获取图片的大小，做大小限制有用
      let imgSize = file.size
      console.log(imgSize)
      var _this = this // this指向问题，所以在外面先定义
      // 比如上传头像限制5M大小，这里获取的大小单位是b
      if (imgSize <= 50 * 1024) {
        // 合格
        _this.errorStr = ''
        console.log('大小合适')
        // 开始渲染选择的图片
        // 本地路径方法 1
        // this.imgStr = window.URL.createObjectURL(e.target.files[0])
        // console.log(window.URL.createObjectURL(e.target.files[0])) // 获取当前文件的信息

        // base64方法 2
        var reader = new FileReader()
        reader.readAsDataURL(file) // 读出 base64
        reader.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
          var dataURL = reader.result
          console.log(dataURL)
          _this.imgStr = dataURL
          // 下面逻辑处理
        }
      } else {
        console.log('大小不合适')
        _this.errorStr = '图片大小超出范围'
      }
    }
  }

}
</script>

用户选择图片之后的渲染方法有两种