头像上传（限制大小，格式，尺寸）

页面展示效果

HTML部分代码`

<div class="LeaderBuild_BaseInfo"><div class="main_left"><div class="main_left_title"><div>基本信息</div></div><div class="main_left_touxiang marginTop" @click="clickUpload"><span v-if="!showImg">上传照片</span><img :src="data:imageUrl" alt="" v-else ref="imgRef"><input v-show="false" ref="uploadRef" type="file" @change="uploadFile" /></div><div class="main_left_yaoqiu marginTop"><div>上传照片要求： </div><div class="main_left_yaoqiu_main">上传照片为免冠证件照，正面二寸 （35mm*45mm），支持JPG、JPEG、gif、PNG格式，大小为2MB以下。</div></div></div></div>

JS部分

data() {return {imageUrl: '',showImg: false,}},methods: {// 因为input的样式不是我需要的，我的方法是首先隐藏input，然后点击上传照片调用input的uploadFile事件clickUpload() {this.$refs.uploadRef.click();},uploadFile(e) {const file = e.target.files[0];const reader = new FileReader();let fileResult = '';reader.readAsDataURL(file);reader.onload = (e) => {fileResult = e.target.result;this.beforeAvatarUpload(file, fileResult);}},beforeAvatarUpload(file, fileResult) {const img = new Image();img.src = fileResult;img.onload = () => {if (img.width / img.height !== 413 / 626) {return this.$message.error('请上传2寸照片');}const imgType = ['image/jpeg', 'image/png', 'image/gif', 'image/jpeg'];if (!imgType.includes(file.type)) {return this.$message.error('上传头像图片仅支持JPG、JPEG、gif、PNG格式!');}const isLt2M = file.size / 1024 / 1024 < 2;if (!isLt2M) {return this.$message.error('上传头像图片大小不能超过 2MB!');}// imageUrl 即图片src可以用上传文件的url也可以用base64// this.imageUrl = URL.createObjectURL(file);this.imageUrl = fileResult;this.showImg = true;}},},

CSS部分

.LeaderBuild_BaseInfo {
width: 300px;
}
.main_left {
width: 100%;
height: 100%;
border: 1px solid #f0f5ff;
padding: 4%;
color: #606266;
font-size: 0.16rem;
}
.marginTop{
margin-top: 20px;
}
.main_left_title {
color: #585858;
font-weight: bold;
}
.main_left_touxiang {
width: 120px;
height: 150px;
line-height: 150px;
margin: 0 auto;
margin-top: 16px;
background: #F2F5F9;
color: #596B89;
text-align: center;
cursor: pointer;
}
img {
width: 120px;
height: 150px;
}
.main_left_yaoqiu{
color: #C8CCD4;
font-size: 0.14rem;
}
.main_left_yaoqiu_main{
line-height: 2vh;
text-indent: 20px;
}

头像上传（限制大小，格式，尺寸）相关推荐

公众号客服头像上传-java
公众号客服头像上传:form-data格式亲测,可以直接使用 public String addCustomer(MultipartFile file, Integer publicNumberId ...
JavaScript头像图片上传插件支持上传类型大小尺寸验证
一行代码实现头像上传,图片大小.尺寸,类型验证 html调用 <img src="这里放默认头像" id="preview" onclick=" ...
jquery file upload 限制上传文件的格式、大小或图片尺寸
限制文件格式.大小 $("#head").fileupload({url: "/front/user/uploadHead",dataType: 'json', ...
Vue elementui 上传前获取图片宽度尺寸和大小
Vue elementui 上传前获取图片宽度尺寸和大小项目中用到elementui上传组件,但是on-change钩子函数中file参数只能拿到文件名字和大小, 如果是图片就拿不到图片的宽高,不符 ...
前端头像上传功能实现之普通图片/头像上传详细解析1【扩展知识FormData对象】
上传的图片/头像有两种方案上传第一种我们不对图片做处理直接上传到服务器端,把图片上传到服务器的img文件夹当中,然后我们把图片的地址信息存储在数据库当中,用图片的时候我们直接调用地址第二种方案是我 ...
【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer 链接:https://zhuanlan.zhihu.com/p/24465742 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙 ...
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
ElementUI + express实现头像上传及后台图片保存
ElementUI + express实现头像上传及后台图片保存记录大创项目中的解决方式.只说明基本的实现方法,不代表实际代码.如果你需要在后台保存头像图片的话. 当然也可以直接使用base64格式 ...
java cropper 上传_java web 网站头像上传处理 (springmvc +bootstrap+cropper)
制作头像上传.请根据您的实际需求,修改代码,不完全正确,仅供参考! 前端页面设计使用bootstrap ,头像预览和剪裁工具使用cropper 后台使用springmvc. 现在来看前端的页面设计前 ...
Android头像上传--图片转base64，后台接收到的总是null问题
图片转base64,后台接到为null问题项目中,在使用头像上传的时候,将图片转为base64,后台总是收到的base64字符串是null.原以为是图片未压缩,导致图片过大,超过了Tomcat配置的 ...

头像上传（限制大小，格式，尺寸）

头像上传（限制大小，格式，尺寸）相关推荐

最新文章

热门文章