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)图片压缩,默认同比例压缩操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • vue中实现图片压缩 file文件的方法

    项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法 将图片压缩的方法写到这个公用的js(api.js)中 //base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件) function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].ma

  • 移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

    面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img src="./icon_input_add.png" /> </van-uploader> js data() { return { files: { name: "", type: "" }, headerImage: null,

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

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

    如下所示: 这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大) 1.提取出压缩方法,放在公共方法.js文件里 /** 图片压缩,默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参数,base64的字符串数据 */ export function compress(fileObj, cal

  • vue+element-ui+axios实现图片上传

    本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples<

  • Vue使用canvas实现图片压缩上传

    本文实例为大家分享了Vue使用canvas实现图片压缩上传的具体代码,供大家参考,具体内容如下 场景:如用户头像等 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 2.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的(但是我用单反拍了个头像,照片超过2M很正常,要对图片进行处理才能上传).如果可

  • Vue实现剪切板图片压缩功能

    监听剪切板粘贴事件,读取剪切板中的图片文件,转成base64通过img标签显示出来,此时可能会存在剪切板中图片过大,产生上传速度慢问题,接下来就跟大家分享下如何将base64图片进行压缩.先跟大家展示下最终实现的效果: 实现思路 监听剪切板粘贴事件 从事件回调中获取clipboardData中的image对象声明一个变量接收该对象 使用reader.readAsDataURL方法加载clipboardData中的image对象 在reader.onload回调中获取图片base64码 创建Ima

  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录. 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考. 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了.怎么办?当然是自己动手丰衣足食啦

  • Vue+Element-UI实现上传图片并压缩

    Vue+Element-UI 上传图片并压缩,供大家参考,具体内容如下 1.版本 Vue:2.5.2 Element-UI:2.12.0 可实现图片上传前,自动压缩. Element-UI组件,详情见 官网. 2.template部分 <el-form-item label="照片"> <el-upload accept="image/*" class="avatar-uploader" :action="upload

  • vue js中实现图片压缩封装方法

    全局main.js引入: // 引入imgUpload方法 import * as imgUpload from "./utils/imgUpload" //外部使用 Vue.prototype.$imgUpload = imgUpload 新建imgUpload.js: const dataURLtoFile = (dataurl, filename) => { // 将base64转换为file文件 let arr = dataurl.split(',') let mime

  • vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • 基于vue+axios+lrz.js微信端图片压缩上传方法

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能按指定尺寸压缩处理 4.上传图片可以从相册中选择或者直接拍照 遇到的坑 采用微信JSSDK上传图片 在之前开发的项目中(mui + jquery),有使用过微信JSSDK的接口上传图片,本想应该能快速迁移至此项目.事实证明编程没有简单的事: 1.按指定尺寸压缩图片 JSSDK提供的接口wx.choo

随机推荐