个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue+elementUI(el-upload)图片压缩,默认同比例压缩操作由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

如下所示:

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/** 图片压缩，默认同比例压缩
  * @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上传组件 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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' 。

然后 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 图片预览
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限制上传图片尺寸、大小、比例 。

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 上传前判断
   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)图片压缩,默认同比例压缩操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/liona_koukou/article/details/84860899 。

最后此篇关于vue+elementUI(el-upload)图片压缩,默认同比例压缩操作的文章就讲到这里了,如果你想了解更多关于vue+elementUI(el-upload)图片压缩,默认同比例压缩操作的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： jQuery中even选择器的定义和用法
文章推荐： 如何利用jwt来保护你的接口服务
文章推荐： javascript实现依次输入input自动定焦
文章推荐： 如何设计一个安全的API接口详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com