使用CompressorJS对上传图片进行前端压缩
compressorjs的Github地址
- 创建compress.ts文件
import Compressor from 'compressorjs';
export function useCompressImage(image: File, quality: number = 0.8, options: any = {}): Promise<File> {
return new Promise((resolve, reject) => {
if (!['image/webp', 'image/jpeg', 'image/png'].includes(image.type)) {
reject(new Error(`Unsupported file type: ${image.type}.`));
}
new Compressor(image, {
quality,
maxWidth: 1024,
maxHeight: 1024,
convertTypes: ['image/webp'],
...options,
success(result) {
resolve(new File([result], image.name.split('.').slice(0, -1).join('.') + '.webp', { type: 'image/webp' }));
},
error(err) {
reject(err);
},
});
});
}
- 使用
import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui';
import { useCompressImage } from '@/hooks/common/compress';
# NaiveUI上传组件示例
const handleUpload = async ({ file, onFinish, onError }: UploadCustomRequestOptions) => {
try {
file.file = await useCompressImage(file.file as File);
} catch (err) {}
startLoading();
const formData = new FormData();
formData.append('file', file.file as File);
const res = await addApi(formData);
if (!res.data) {
onError();
} else {
window.$message?.success('上传成功');
visible.value = false;
onFinish();
emit('submitted');
}
endLoading();
};
<NUpload
v-if="visible"
:default-file-list="fileList"
directory-dnd
:max="1"
:custom-request="handleUpload"
>
<NUploadDragger>
<div style="margin-bottom: 12px">
<NIcon size="48" :depth="3">
<icon-ph-upload-simple-fill />
</NIcon>
</div>
<NText style="font-size: 16px">
点击或者拖动文件到该区域来上传
</NText>
<NP depth="3" style="margin: 8px 0 0 0">
图片支持jpg、jpeg、png格式,视频支持mp4格式,视频文件不超过500M
</NP>
</NUploadDragger>
</NUpload>
版权申明
本文系作者 @晏溪 原创发布在晏溪笔记站点。未经许可,禁止转载。
暂无评论数据