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

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

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

(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.sizeconsole.log(imgSize)var _this = this // this指向问题，所以在外面先定义// 比如上传头像限制5M大小，这里获取的大小单位是bif (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方法 2var reader = new FileReader()reader.readAsDataURL(file) // 读出 base64reader.onloadend = function () {// 图片的 base64 格式, 可以直接当成 img 的 src 属性值var dataURL = reader.resultconsole.log(dataURL)_this.imgStr = dataURL// 下面逻辑处理}} else {console.log('大小不合适')_this.errorStr = '图片大小超出范围'}}}}
</script>

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

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

到这里，最简单的上传头像问题就解决了，

（上传前）

（上传后）

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

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

vue项目中上传文件到阿里云oss方法
上传背景介绍在项目需求中,关于图片.视频.文件等上传文件,一般不是直接放置在自己的后台服务器上,一般都会购买云服务进行存储.譬如阿里云的oss对象存储. 那么,前端开发项目中,涉及到上传的功能时,我 ...
vue项目中实现头像上传的功能型组件
@vue项目中实现头像上传的功能型组件功能需求实现个人中心的头像上传功能: 1.用户未上传过头像,展示设定好的默认头像(区分男女) 2.支持格式png.jpg.jpeg 3.图片大小:小于等于2M ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
vue项目中-上传图片头像并裁剪成任意大小的实现
vue项目中-上传图片头像并裁剪成任意大小的实现先看效果图: 放大缩小-翻转-查看都有的哦! 直接上代码 <el-dialog title="图片剪裁" :visible. ...
vue+elementui上传头像
vue+elementui上传头像 vue页面中: <el-form :model="form"><el-form-item label="路径&quo ...
将本地vue项目上传到github上
将本地vue项目上传到github上首先,打开本地创建好的vue项目文件,右键点击Git bash Here,打开Git命令工具,输入git init 回车运行,生成.git文件. 运行git ad ...
springboot+vue实现上传头像文件到阿里云对象存储oss
在阿里云oss上创建一个bucket,获取四个信息: 编写工具类,提供对外调用四个信息的方法: //当项目一启动,就执行接口的方法,读取配置文件内容 @Component public class C ...

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

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

最新文章

热门文章