前端使用Compressor.js实现图片压缩上传

Compressor.js官方文档

安装

<code>npm install compressorjs

使用

在使用ElementUI或者其他UI框架的上传组件时，都会有上传之前的钩子函数，在这个函数中可以拿到原始file，这里我用VantUI的上传做演示

afterRead 函数是上传之前的钩子，可以获取到原始file

<template>

<div>

<van-uploader

:max-count="prop.limit"code>

v-model="state.fileList"code>

:after-read="afterRead"code>

:before-read="beforeRead"code>

@delete="deleteFile"code>

/>

</div>

</template>

<script setup>

import { reactive, defineEmits, defineProps, watch } from 'vue'

import { FileUploadFun } from '@/api/index.js'

import { useCustomFieldValue } from '@vant/use'

import { Toast } from 'vant'

import Compressor from 'compressorjs'

const prop = defineProps({

url: {

type: String,

default: '',

},

limit: {

type: Number,

default: 5,

},

})

const emit = defineEmits(['onSuccess'])

const state = reactive({

fileList: [],

})

watch(

() => prop.url,

() => {

if (prop.url) {

state.fileList = []

prop.url.split(',').forEach((item) => {

state.fileList.push({

url: item,

})

})

}

}

)

// 文件上传之前对图片进行压缩

const beforeRead = (file) => {

return new Promise((resolve, reject) => {

new Compressor(file, {

// 压缩质量，0-1之间。数字越小，压缩比越高

quality: 0.2,

success(result) {

// 默认返回result是blob类型的文件，可以转成file并返回，交给afterRead钩子进行上传

let newFile = new File([result], file.name, { type: file.type })

resolve(newFile)

},

error(err) {

reject(err)

},

})

})

}

// 文件上传后触发

const afterRead = (file) => {

file.status = 'uploading'

file.message = '上传中...'

FileUploadFun(file.file)

.then((res) => {

file.status = 'done'

file.message = '上传成功'

let urls = state.fileList.map((i) => i.url)

urls.pop()

urls.push(res.data.url)

// 通知外界上传成功

emit('onSuccess', urls.join(','))

})

.catch(() => {

state.fileList.pop()

file.status = 'done'

Toast('上传失败')

})

}

// 文件删除后触发

const deleteFile = () => {

emit('onSuccess', state.fileList.map((i) => i.url).join(','))

}

// 用于返回信息

useCustomFieldValue(() => state.fileList.map((item) => item.url).join(','))

</script>

示例