如何封装微信小程序中的图片上传功能

前言

在微信小程序开发中，图片上传功能是一个十分常见的需求，不管是社交分享、商城中的商品图片上传，还是在线报修、问诊等应用场景，上传图片都能够提升用户体验。而在实际项目中，我们常常需要对上传图片的逻辑进行封装，使得代码更加简洁、易于复用。本文将详细介绍如何封装微信小程序中的图片上传功能，帮助开发者构建一个易扩展、易维护的上传模块。

一、需求分析与设计思路

在开发一个图片上传功能时，我们需要关注以下几个方面：

•	多张图片上传：是否允许用户同时选择和上传多张图片？
•	文件校验：需要限制图片的格式和大小，避免用户上传不支持的格式或过大的图片文件。
•	错误处理：如何优雅地处理上传失败或文件选择失败的情况，提升用户体验。
•	模块化封装：为了提高代码的复用性，我们希望将上传逻辑封装成一个函数，能够灵活配置上传路径、表单数据等。

基于这些需求，我们决定对微信小程序的 wx.chooseMedia 和 wx.uploadFile API 进行封装，使得调用逻辑更加简洁，并且处理了常见的文件校验和错误处理。

二、上传图片功能封装

下面是我们对微信小程序图片上传功能的封装代码。它允许上传多张图片，包含文件格式和大小的校验，并处理了上传和文件选择过程中的错误。

import {
   
    BASE_URL, prefix } from "./config";

// 限制文件大小为 5MB
const MAX_FILE_SIZE = 5 * 1024 * 1024; 

/**
 * 校验图片格式
 * @param {string} filePath - 选择的文件路径
 * @returns {boolean} - 是否通过格式校验
 */
function validateImageType(filePath: string): boolean {
   
   
  const validFormats = ['jpg', 'jpeg', 'png'];
  const fileExtension = filePath.split('.').pop()?.toLowerCase();
  return validFormats.includes(fileExtension || '');
}

/**
 * 校验图片大小
 * @param {number} fileSize - 文件大小
 * @returns {boolean} - 是否通过大小校验
 */
function validateImageSize(fileSize: number): boolean {
   
   
  return fileSize <= MAX_FILE_SIZE;
}

/**
 * 上传图片到服务器
 * @param formData - 额外的表单数据，默认为空对象
 * @param count - 上传的图片数量，默认为 1
 * @returns 返回一个 Promise，resolve 成功结果，reject 错误信息
 */
export function uploadImages(formData: object = {
   
   }