美文网首页
图片文件压缩:

图片文件压缩:

作者: 懒懒猫 | 来源:发表于2022-08-30 10:53 被阅读0次

原文件:https://github.com/fengyuanchen/compressorjs

安装

npm install compressorjs

使用

import { compressImage } from '@/utils/CompressImageUtiles'
...
        // 单张上传
        file.status = 'uploading'
        file.message = '上传中...'

       // 压缩图片
        compressImage(file.file).then(result => {
          console.log('压缩后的结果', result) // result即为压缩后的结果
          console.log('压缩前大小', file.file.size)
          console.log('压缩后大小', result.size)

          if (result.size > file.file.size) {
            // 压缩后比原来更大,则将原图上传
            //调接口上传图片到服务器
            this._uploadFile(file.file, cueIndex, file.file.name)
          } else {
            // 压缩后比原来小,上传压缩后的
            //调接口上传图片到服务器
            this._uploadFile(result, cueIndex, file.file.name)
          }
        })
        ...

// 上传图片
    _uploadFile(file,filename) {
    
        const formData = new FormData()
        formData.append('file', file)
        axios
          .post(`${baseFileUrl}/uavDelivery/file/uploadFile`, formData, {
            headers: {
              Authorization: storage.get(ACCESS_TOKEN)
            }
          }) // 填写url地址
          .then(res => {
           // 上传成功
          })
          .catch(err => {
            console.log(err)
              // 上传失败
      } else {
        this.$toast('最多上传九张照片!')
      }
    }

压缩图片js

CompressImageUtiles.js

/**
 */

// 将base64转换为blob

import Compressor from 'compressorjs'
export function compressImage(file) {
  if (!file) {
    return
  }
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.6,
      maxWidth: 1000,
      maxHeight: 1000,

      success(result) {
        resolve(result)
      },
      error(err) {
        console.log(err.message)
        reject(err.message)
      }
    })
  })
}

相关文章

网友评论

      本文标题:图片文件压缩:

      本文链接:https://www.haomeiwen.com/subject/eqirwrtx.html