图片文件压缩:

原文件: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)
      }
    })
  })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容