[JavaScript知识库] vue实现图片压缩，支持多文件上传时压缩图片（只能支持jpeg)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue实现图片压缩，支持多文件上传时压缩图片（只能支持jpeg) -> 正文阅读

[JavaScript知识库]vue实现图片压缩，支持多文件上传时压缩图片（只能支持jpeg)

参考一篇博主的文章

js图片压缩(compressorjs) - 简书

1、封装

文档地址https://github.com/fengyuanchen/compressorjs

npm install compressorjs

import Compressor from 'compressorjs';

/**
 * @param image 图片
 * @param backType 需要返回的类型blob,file
 * @param quality 图片压缩比 0-1,数字越小，图片压缩越小
 * @returns
 */
export default function ImageCompressor(image, backType, quality) {
    return new Promise((resolve, reject) => {
        new Compressor(image, {
            quality: quality || 0.6,
            success(result) {
                let file = new File([result], image.name, { type: image.type })

                if (!backType || backType == 'blob') {
                    resolve(result)
                } else if (backType == 'file') {
                    resolve(file)
                } else {
                    resolve(file)
                }
            },
            error(err) {
                console.log('图片压缩失败---->>>>>', err)
                reject(err)
            }
        })
    })
}

?2、调用

   async getUrl(file) { //file是文件数组
      //......
      const formData = new FormData();
      for (let i = 0; i < file.length; i++) {
        //对图片进行压缩
        let newImg = await ImageCompressor(file[i], 'file', 0.6);
        formData.append('file', newImg);
      }

      multipleFiles(formData, config).then((res) => {
          //.........
      })

    },