随着移动互联网的发展，图片上传功能已经成为各种应用中不可或缺的一部分。然而，直接上传大体积图片不仅会消耗用户的流量，还可能导致上传失败或服务器负载过重。因此，图片压缩和上传功能显得尤为重要。在本文中，我们将介绍如何使用UniApp与Vue3结合Typescript实现图片压缩和上传功能。

功能概述

我们将实现以下功能：

图片选择与预览图片压缩图片上传上传进度显示环境配置

首先，确保你的项目中已经安装了UniApp和Vue3，并且配置好了Typescript。

图片压缩模块

我们需要一个图片压缩的工具函数，用于在用户选择图片后进行压缩。以下是compressImage.js模块的实现：

// compressImage.ts// 图片压缩export const compressImage = (imgSrc: string, scale: number = 0.8): Promise<string> => { return new Promise((resolve, reject) => { let img = new Image(); img.src = imgSrc; img.onload = () => { let h = img.height / 2; let w = img.width / 2; let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d')!; canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); let base64 = canvas.toDataURL('image/png', scale); canvas = null; let blob = base64ToBlob(base64); let blobUrl = window.URL.createObjectURL(blob); resolve(blobUrl); }; img.onerror = (error) => { reject(error); }; });};// base64转Blobexport const base64ToBlob = (base64: string): Blob => { let arr = base64.split(','); let mime = arr[0].match(/:(.*?);/)![1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime });};请求计数模块

为了更好地管理请求状态，我们需要实现一个请求计数模块requestCount.ts，用于增加、减少和获取请求计数。

// requestCount.tslet requestCount = 0;export const increaseRequestCount = () => { requestCount++;};export const decreaseRequestCount = () => { if (requestCount > 0) { requestCount--; }};export const getRequestCount = () => { return requestCount;};文件上传模块

接下来，我们实现文件上传的模块，该模块封装了上传文件的逻辑，并处理上传过程中的各种状态。

// request.tsimport { increaseRequestCount, decreaseRequestCount, getRequestCount } from '@/common/requestCount';export interface OnlineSvcResult<T> { code: number; msg: string; data?: T; total?: number; rows?: T;}function checkResult<ResponseData>(res: OnlineSvcResult<ResponseData>, showError: boolean) { let message = '系统错误'; if (res.code !== 200) { if (res.msg) { message = res.msg; } showError && uni.showToast({ title: message, icon: 'none', }); }}function hideLoading(loading: boolean) { loading && decreaseRequestCount(); if (getRequestCount() === 0) { loading && uni.hideLoading(); }}export function uploadFile<ResponseData>(fileUri: string): Promise<OnlineSvcResult<ResponseData>> { increaseRequestCount(); uni.showLoading({ title: '上传中...', mask: true, }); const options: UniNamespace.RequestOptions = { url: 'http://127.0.0.1:8022/common/upload', timeout: 30000, filePath: fileUri, name: 'file', }; return new Promise((resolve) => { uni.uploadFile({ ...options, success: (res) => { if (res.statusCode === 200) { let data: OnlineSvcResult<ResponseData> = JSON.parse(res.data); checkResult(data, true); resolve(data); } }, fail: (e) => { uni.showToast({ title: '服务器或网络异常，请稍后再试', icon: 'none', }); resolve({ code: -1, msg: '服务器或网络异常，请稍后再试', }); }, complete: () => { hideLoading(true); } }); });}Vue组件实现

最后，我们在Vue组件中使用上述模块，实现图片选择、压缩和上传的功能。

<!-- index.vue --><template> <view>通过以上步骤，我们实现了在UniApp和Vue3中使用Typescript进行图片压缩和上传的功能。这样不仅可以大大减少用户的流量消耗，还能提高图片上传的成功率和速度。

如果对你有帮助并且也喜欢，可以点赞收藏留言，关注哟~