vue图片压缩上传

前言

之前图片压缩是公司前辈留下的一个js方法，采用的回调函数处理。最近一个项目为了优化用户体验，在图片上传失败后要根据接口返回的状态值更改页面UI，此时该js方法就会出现异常，于是我找到了 image-conversion。

安装

npm i image-conversion --save

或者

yarn add image-conversion

引入

import * as imageConversion from 'image-conversion'

或者

import {compress, compressAccurately} from 'image-conversion'

常用方法列表

compress

语法

compress(file, config) → {Promise(Blob)}

参数

名称	类型	描述
file	File(Blob)	一个File(Blob)对象
config	number or object	如果是数字类型，范围0-1，表示图像质量; 如果是对象类型，你可以传递参数给imagetoCanvas和dataURLtoFile方法;

举例

// number
imageConversion.compress(file,0.8)

// object
imageConversion.compress(file,{
  quality: 0.8,
  type: "image/jpeg",
  width: 300,
  height: 200,
  orientation:2,
  scale: 0.5,
})

返回值

返回一个包含Blob对象的Promise

compressAccurately

该方法可以精确修改图片的大小

语法

compressAccurately(file, config) → {Promise(Blob)}

参数

名称	类型	描述
file	File(Blob)	一个File(Blob)对象
config	number or object	如果是number类型，指定压缩图像的大小(单位KB); 如果是对象类型，你可以传递参数给imagetoCanvas和dataURLtoFile方法;

举例

// number
imageConversion.compressAccurately(file,100); // 压缩后的图像大小为100kb

// object
imageConversion.compressAccurately(file,{
  // 压缩后的图像大小为100kb
  size: 100,
  // 图像压缩尺寸的精度，范围0.8-0.99，默认为0.95; 
  // 这意味着如果图片大小设置为1000Kb，精度为0.9，则认为压缩结果为900Kb-1100Kb的图像是可接受的; 
  accuracy: 0.9,
  type: "image/jpeg",
  width: 300,
  height: 200,
  orientation:2,
  scale: 0.5,
})

返回值

返回一个包含Blob对象的Promise

此处只记录以上两个方法，有更多需求可跳转官方文档

实例

该项目为 Vue + Vant ，此处使用Uploader文件上传执行图片压缩并上传的操作

// template
<van-field name="本人照片" label="本人照片" required>
  <template #input>
    <van-uploader v-model="uploader" :max-count="1" :after-read="afterRead" />
  </template>
</van-field>

// script
import * as imageConversion from 'image-conversion'

// methods
async afterRead(file) {
  // 此时可以自行将文件上传至服务器
  console.log(file)
  file.status = 'uploading'
  file.message = '上传中...'
  // 将图片精确压缩到600kb
  const blob = await imageConversion.compressAccurately(file.file, 600)
  // Blob转FormData
  const formdata = new FormData()
  // append第三个参数为可选项，此处本项目接口需要
  formdata.append('file', blob, file.file.name)
  // 调用fileUpload接口
  const { code, data } = await fileUpload(formdata)
  // 此处code为接口定义状态码，本项目成功为0
  if (code === 0) {
    file.status = 'done'
    file.message = '上传成功'
    console.log(data)
  } else {
    file.status = 'failed'
    file.message = '上传失败'
  }
}