使用element ui的文件上传组件实现上传图片前压缩图片

最新推荐文章于 2024-03-26 00:42:08 发布

papapipo

最新推荐文章于 2024-03-26 00:42:08 发布

阅读量1.3k

点赞数

分类专栏： vue学习项目实训——智能创新引导工具文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/sdu_DYL/article/details/124826178

版权

项目实训——智能创新引导工具同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue学习

9 篇文章 0 订阅

订阅专栏

在before-upload事件里编写方法：

beforeUpload(file) { // 文件上传前钩子
          const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' //图片格式是否为png或jpg
          const isLt10M = file.size / 1024 / 1024 < 10 //判断图片大小是否超过10MB
          if (!isJpgOrPng) {
            this.$message.error('文件格式错误！')
          } else if(!isLt10M) {
            this.$message.error('文件过大！')
          } else {
            const _this = this
            return new Promise(resolve => {
              const reader = new FileReader()
              const image = new Image()
              image.onload = (imageEvent) => {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                const originWidth = image.width
                const originHeight = image.height
                // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
                let maxWidth = 800, maxHeight = 800
                // 目标尺寸
                let targetWidth = originWidth, targetHeight = originHeight
                // 图片尺寸超过800x800的限制
                if (originWidth > maxWidth || originHeight > maxHeight) {
                  if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                  } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                  }
                }
                canvas.width = targetWidth
                canvas.height = targetHeight
                context.clearRect(0, 0, targetWidth, targetHeight)
                context.drawImage(image, 0, 0, targetWidth, targetHeight)
                const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
                const blobData = _this.dataURItoBlob(dataUrl, 'image/jpeg')
                resolve(blobData)
              }
              reader.onload = (e => { image.src = e.target.result; })
              reader.readAsDataURL(file)
            })
          }
          return isJpgOrPng && isLt10M
        },

在上传图片之前，将图片大小压缩为不超过800*800，质量压缩为0.8，格式改为.jpeg