vue+elementUI(el-upload)图片压缩,默认同比例压缩操作


Posted in Javascript onAugust 10, 2020

如下所示:

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大)

1、提取出压缩方法,放在公共方法.js文件里

/** 图片压缩,默认同比例压缩
 * @param {Object} fileObj
 * 图片对象
 * 回调函数有一个参数,base64的字符串数据
 */
export function compress(fileObj, callback) {
 try {
 const image = new Image()
 image.src = URL.createObjectURL(fileObj)
 image.onload = function() {
  const that = this
  // 默认按比例压缩
  let w = that.width
  let h = that.height
  const scale = w / h
  w = fileObj.width || w
  h = fileObj.height || (w / scale)
  let quality = 0.7 // 默认图片质量为0.7
  // 生成canvas
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  // 创建属性节点
  const anw = document.createAttribute('width')
  anw.nodeValue = w
  const anh = document.createAttribute('height')
  anh.nodeValue = h
  canvas.setAttributeNode(anw)
  canvas.setAttributeNode(anh)
  ctx.drawImage(that, 0, 0, w, h)
  // 图像质量
  if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
  quality = fileObj.quality
  }
  // quality值越小,所绘制出的图像越模糊
  const data = canvas.toDataURL('image/jpeg', quality)
  // 压缩完成执行回调
  const newFile = convertBase64UrlToBlob(data)
  callback(newFile)
 }
 } catch (e) {
 console.log('压缩失败!')
 }
}
function convertBase64UrlToBlob(urlData) {
 const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头,并转换为byte
 // 处理异常,将ascii码小于0的转换为大于0
 const ab = new ArrayBuffer(bytes.length)
 const ia = new Uint8Array(ab)
 for (let i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i)
 }
 return new Blob([ab], { type: 'image/png' })
}

2、el-upload上传组件

<el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0">
 <el-upload
 ref="uploadxls"
 class="avatar-uploader upload-img"
 :disabled="disabled"
 :auto-upload="false"
 :style="{height:'66px', backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center', backgroundSize: '100%,100%'}"
 action="aaa"
 ::limit="1"
 :show-file-list="false"
 :on-change="handlePictureCardPreview"
 :before-upload="beforeupload"
 accept="image/png,image/gif,image/jpg,image/jpeg"
 >
 <!--<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">-->
 <i v-if="!dialogImageUrl" class="el-icon-plus avatar-uploader-icon" />
 <!--<i v-show="!dialogImageUrl" class="upload-icon" />
 <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传实景图</div>-->
 <div v-if="showDelete" class="remove-img"><i class="el-icon-delete" @click.stop="removeImg" /></div>
 <div slot="tip" class="el-upload__tip">
  <p><span style="color:#F5222D;">*</span>上传楼宇实景图</p>
  <p>支持:.jpg .png .gif格式 建议比例:16:9,小于10M</p>
 </div>
 </el-upload>
</el-form-item>

3、主要在handlePictureCardPreview方法里调用压缩方法

先在当前vue页面import公共js文件

import { compress } from '@/utils'

然后

// 图片预览
handlePictureCardPreview(file) {
 const _that = this
 const isLt10M = file.size / 1024 / 1024 < 10
 if (!isLt10M) {
 this.$message.error('上传图片大小不能超过 10M!')
 return false
 } else {
 this.dialogImageUrl = URL.createObjectURL(file.raw)
 compress(file.raw, function(val) {
  _that.theForm.picUrl = val
  _that.imgFile = val
  _that.showDelete = true
  _that.$refs['addBuildingForm'].validateField('picUrl')
 })
 }
}

compress传入file.raw作为fileObj

这样只要上传图片就进行图片压缩

补充知识:element upload限制上传图片尺寸、大小、比例

我就废话不多说了,大家还是直接看代码吧~

// 上传前判断
  public async beforeUpload(file: any) {
    const is1M = file.size / 1024 / 1024 < 3; // 限制小于3M
    if (!is1M) {
      this.$message.error('图片尺寸限制最小为270 x 270,大小不可超过3MB,比例为1:1');
      return false;
    } else {
      const isSize = new Promise((resolve, reject) => {
        const width = 270;
        const height = 270;
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.onload = () => {
          const valid = img.width >= width && img.height >= height && img.width === img.height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error('图片尺寸限制最小为270 x 270,大小不可超过3MB,比例为1:1');
          return Promise.reject();
        },
      );
      return isSize;
    }
  }

看了很多还不如自己撸一个

以上这篇vue+elementUI(el-upload)图片压缩,默认同比例压缩操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
You might like
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Sublime开发python程序的示例代码
2018/01/24 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Numpy数组的广播机制的实现
2020/11/03 Python
技术总监个人的自我评价范文
2013/12/18 职场文书
环保建议书作文
2014/03/12 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年接待工作总结
2014/11/26 职场文书
2015年小学校长工作总结
2015/05/19 职场文书