图片压缩JS库 Compressorjs 的简单使用示例

一、安装

• npm

  npm install compressorjs

• yarn

  yarn add compressorjs

二、使用

示例使用阿里云OSS上传

• 在Vant项目中使用

 <template>
   <van-uploader
      v-model="uploadImage" 
      :max-count="uploadConfig.maxCount" 
      :max-size="uploadConfig.maxSize" 
      @oversize="onOversize"
      :after-read="onAfterRead"
      :before-read="onBeforeRead"
   />
 </template>

 <script setup>
   import { reactive, ref } from 'vue';
   import { showToast } from 'vant';

   import OSS from 'ali-oss'
   import Compressorjs from 'compressorjs';

   //阿里云OSS配置
   const ossClient = new OSS({
     region: 'region',
     accessKeyId: 'accessKeyId',
     accessKeySecret: 'accessKeySecret',
     stsToken: 'stsToken',
     bucket: 'bucket'
   })

   //上传配置
   const uploadConfig = reactive({
     //最大上传数量
     maxCount: 1,
     //文件上传大小限制, 2M
     maxSize: 2 * 1024 * 1024,
     //上传域名
     host: 'https://xxx.com'
   });

   //上传数据
   const uploadImage = ref([])

   //上传前事件
   const onBeforeRead = (file) => {
     return new Promise((resolve, reject) => {
       new Compressorjs(file, {
         //压缩质量, 0-1
         quality: 0.6,
         //转换的类型，默认为 image/png
         convertTypes: ['image/jpeg'],
         //需要压缩的起始大小，默认5M, 5 * 1000 * 1000
         convertSize: 5000000,
         //压缩成功后处理
         success(result) {
           resolve(result);
         },
         error(err) {
           console.log(err.message);
           reject()
         },
       });
     });
   }

   //读取文件成功后处理
   const onAfterRead = (obj) => {
     onUpload(obj, result => {
       //上传后处理
     })
   }

   //上传
   const onUpload = (obj, callback) => {
     obj.status = 'uploading';
     obj.message = '上传中...';

     //文件名
     let fileName = obj.file.name;
     
     //上传到服务器
     ossClient.multipartUpload(fileName, obj.file, {
       progress: function (p) { 
         //获取进度条的值
         if (p == 1) {
           //关闭loading加载
           closeToast()
         }
       }
     }).then(result => {
         obj.serviceUrl = uploadConfig.host + result.name
         obj.status = 'done';
         obj.message = '上传成功';
   		
         if(callback) {
           callback(obj)
         }		
     }).catch(err => {
         console.log("err:", err)
         obj.status = 'failed';
         obj.message = '上传失败';
         if(callback) {
           callback(obj)
         }
     })
   }

   //超出文件大小限制处理
   const onOverSize = () => {
     showToast('超出文件大小限制！')
   }
 </script>

• 在Element-plus中使用

  <template>
    <el-upload
       action="#"
       :file-list="uploadImage" 
       :limit="uploadConfig.maxCount" 
       :max-size="uploadConfig.maxSize" 
       :on-exceed="onExceed"
       :http-request="onHttpRequest"
       :before-upload="onBeforeUpload"
       :on-success="onSuccess"
	/>
  </template>

  <script setup>
    import { reactive, ref } from 'vue';
    import { ElMessage, ElLoadingService } from 'element-plus';

    import OSS from 'ali-oss'
    import Compressorjs from 'compressorjs';

    //阿里云OSS配置
    const ossClient = new OSS({
      region: 'region',
      accessKeyId: 'accessKeyId',
      accessKeySecret: 'accessKeySecret',
      stsToken: 'stsToken',
      bucket: 'bucket'
    })

    //上传配置
    const uploadConfig = reactive({
      //最大上传数量
      maxCount: 1,
      //文件上传大小限制, 2M
      maxSize: 2 * 1024 * 1024,
      //上传域名
      host: 'https://xxx.com'
    });

    //上传数据
    const uploadImage = ref([])

    //上传前事件
    const onBeforeUpload = (file) => {
      return new Promise((resolve, reject) => {
        new Compressorjs(file, {
          //压缩质量, 0-1
          quality: 0.6,
          //转换的类型，默认为 image/png
          convertTypes: ['image/jpeg'],
          //需要压缩的起始大小，默认5M, 5 * 1000 * 1000
          convertSize: 5000000,
          //压缩成功后处理
          success(result) {
            resolve(result);
          },
          error(err) {
            console.log(err.message);
            reject()
          },
        });
      });
    }

    //上传请求
    const onHttpRequest = (options) => {
      //文件名
      let fileName = options.file.name;

      //设置文件上传后的名称
      options.file.url = uploadConfig.host + fileName;
	  
      let loading = ElLoadingService({
	message: 'Loading'
      })
      
      //上传到服务器
      return ossClient.multipartUpload(fileName, options.file, {
        progress: function (p) { 
          //获取进度条的值
          if (p == 1) {
            //关闭loading加载
            loading.close();
          }
        }
      })
    }

    //上传成功
    const onSuccess = (response, uploadFile, uploadFiles) => {
       console.log(uploadFile.raw.url)
    }

    //超出文件大小限制处理
    const onExceed = () => {
      ElMessage.error('超出文件大小限制！')
    }
  </script>