js图片压缩插件compressorjs

最新推荐文章于 2025-10-24 12:47:19 发布

原创

最新推荐文章于 2025-10-24 12:47:19 发布 · 4.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

这段代码展示了如何根据文件大小调整压缩质量，并使用compressorjs进行文件压缩。当文件大小小于1M、5M、10M时，压缩质量分别设置为0.8、0.5和0.3，超过10M则设置为0.1。压缩完成后，将结果转换回file类型并上传到服务器。

    //d.file是上传的原始文件数据
    let quality=1
      if(d.file.size<1000*1000){ //小于1M
        quality=0.8
      }else if(d.file.size<5000*1000){ //小于5M
        quality=0.5
      }else if(d.file.size<10000*1000){ //小于10M
        quality=0.3
      }else{ //大于10M
        quality=0.1
      }
      new Compressor(d.file, {
        quality: quality, //压缩比例0-1
        success:(result) => {
          // console.log(result);
          //blob转file,因为大文件会被转成blob类型
          result = new File([result], d.file.name, {type: d.file.type, lastModified: Date.now()});//blob转file
          var params = new FormData();
          params.append('file', result);
          this.$http
            .post("/appFile/fileUpload",params)
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.error(err);
            });
        },
        error(err) {
          console.log(err.message);
        },
      });

参考compressorjs