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

小咪咪 2022-03-11 08:51 1630阅读 0赞

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

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

(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>

**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>

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

*  本地路径方法转化 window.URL.createObjectURL
 *  FileReader转化为base64格式

到这里，最简单的上传头像问题就解决了，  
![上传前][20190307173945532.png]  
（上传前）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70]  
（上传后）

下期更新怎么实现裁剪相关需求

[20190307173945532.png]: /images/20220311/6ac51a41c0a94be784552e9d9c7f6d3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70]: /images/20220311/33f8bd1338e14256897de1f8589e4fc0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1630人围观）

还没有评论，来说两句吧...

相关阅读

相关简易的springboot上传头像(图片)代码片段

/ 上传头像 @throws IOException @throws IllegalStateException / public String

傷城~/ 2023年05月29日 05:29/ 0 赞/ 6 阅读

相关上传头像裁剪

<template> <div id="demo"> <van-nav-bar title="上传头像"

系统管理员/ 2022年11月21日 09:55/ 0 赞/ 286 阅读

相关 Vue中使用input简易的上传图片

![在这里插入图片描述][20210618111438568.png] <div class="boximg"> <div cla

偏执的太偏执、/ 2022年10月07日 12:59/ 0 赞/ 254 阅读

相关二十一、修改头像（2）----上传头像图片

上传图片的存储服务器用的是阿里云的OSS，这不是广告![偷笑][titter.gif]。买的是40G/一年的试用版，9块钱。首先要搞清楚OSS几个专业术语： 1、Acce

迈不过友情╰/ 2022年09月25日 10:29/ 0 赞/ 217 阅读

相关本地项目上传Github简易教程

在日常的开发过程中，我们一般都会有些组件或者框架代码的积累，但是组件代码如何分享开源出去是个比较麻烦的问题，但是自从有了Github一下子就简单多了，大家可以很方便的将代码挂到

红太狼/ 2022年05月31日 14:15/ 0 赞/ 232 阅读

相关 vue裁剪并上传头像

之前，在用vue写一个上传头像的模块，里面需要对头像进行拖动裁剪设置,可是后台却跟我说他只要类似于input上传图片的内容。前端是没有办法操作本地图片的，一般也只能是传图片+裁

比眉伴天荒/ 2022年05月28日 12:37/ 0 赞/ 330 阅读

相关实现头像,文件上传

该文章来源于 [https://www.cnblogs.com/libo0125ok/p/7773898.html][https_www.cnblogs.com_libo0

电玩女神/ 2022年05月22日 13:09/ 0 赞/ 429 阅读

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

作为一名代码届的前端码农，上传头像这样的功能肯定是见怪不怪了，这两天有点儿空余时间，整理了一下上传头像的功能实现方法。首先考虑上传的相关需求要求 (1) 格式要求（

小咪咪/ 2022年03月11日 08:51/ 0 赞/ 1631 阅读

相关 Django用户头像上传

1 将文件保存到服务器本地 upload.html ? <table> <tbody> <tr> <td> <div> 1

╰+攻爆jí腚メ/ 2021年11月04日 17:48/ 0 赞/ 526 阅读

相关 Vue上传头像组件-基于vue-cropper

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

谁借莪１个温暖的怀抱￠/ 2021年07月25日 20:02/ 0 赞/ 988 阅读