如何封装微信小步伐中的图片上传功能

---

前言

在微信小步伐开发中，图片上传功能是一个非经常见的需求，不管是社交分享、商城中的商品图片上传，还是在线报修、问诊等应用场景，上传图片都可以或许提拔用户体验。而在实际项目中，我们经常需要对上传图片的逻辑进行封装，使得代码更加简便、易于复用。本文将具体先容如何封装微信小步伐中的图片上传功能，帮助开发者构建一个易扩展、易维护的上传模块。

---

一、需求分析与设计思绪

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

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

复制代码

基于这些需求，我们决定对微信小步伐的 wx.chooseMedia 和 wx.uploadFile API 进行封装，使得调用逻辑更加简便，并且处置处罚了常见的文件校验和错误处置处罚。
二、上传图片功能封装

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

1. import { BASE_URL, prefix } from "./config";
3. // 限制文件大小为 5MB
4. const MAX_FILE_SIZE = 5 * 1024 * 1024;
6. /**
7. * 校验图片格式
8. * @param {string} filePath - 选择的文件路径
9. * @returns {boolean} - 是否通过格式校验
10. */
11. function validateImageType(filePath: string): boolean {
12.   const validFormats = ['jpg', 'jpeg', 'png'];
13.   const fileExtension = filePath.split('.').pop()?.toLowerCase();
14.   return validFormats.includes(fileExtension || '');
15. }
17. /**
18. * 校验图片大小
19. * @param {number} fileSize - 文件大小
20. * @returns {boolean} - 是否通过大小校验
21. */
22. function validateImageSize(fileSize: number): boolean {
23.   return fileSize <= MAX_FILE_SIZE;
24. }
26. /**
27. * 上传图片到服务器
28. * @param formData - 额外的表单数据，默认为空对象
29. * @param count - 上传的图片数量，默认为 1
30. * @returns 返回一个 Promise，resolve 成功结果，reject 错误信息
31. */
32. export function uploadImages(formData: object = {}, count: number = 1): Promise<any> {
33.   return new Promise((resolve, reject) => {
34.     // 选择照片
35.     wx.chooseMedia({
36.       count: count, // 用户可选择多张图片
37.       mediaType: ["image"],
38.       sourceType: ["album", "camera"],
39.       success: (chooseMediaRes) => {
40.         const tempFiles = chooseMediaRes.tempFiles;
42.         // 校验文件格式和大小
43.         for (const file of tempFiles) {
44.           if (!validateImageType(file.tempFilePath)) {
45.             return reject(new Error("不支持的图片格式，仅支持 JPG, JPEG, PNG 格式"));
46.           }
48.           if (!validateImageSize(file.size)) {
49.             return reject(new Error(`图片大小不能超过 ${MAX_FILE_SIZE / 1024 / 1024}MB`));
50.           }
51.         }
53.         // 批量上传图片
54.         const uploadPromises = tempFiles.map((file) => {
55.           return new Promise((uploadResolve, uploadReject) => {
56.             wx.uploadFile({
57.               url: `${BASE_URL}${prefix}/upload`, // 上传接口地址
58.               filePath: file.tempFilePath,
59.               name: "file", // 文件对应的 key
60.               formData: formData, // 传递额外的表单数据
61.               success: (uploadRes) => {
62.                 try {
63.                   const data = JSON.parse(uploadRes.data); // 解析服务器返回的 JSON 数据
64.                   uploadResolve(data); // 上传成功，返回解析的数据
65.                 } catch (error) {
66.                   uploadReject(new Error("解析服务器返回的数据失败")); // 解析失败的错误处理
67.                 }
68.               },
69.               fail: (err) => {
70.                 uploadReject(new Error("上传照片失败")); // 上传失败的错误处理
71.               },
72.             });
73.           });
74.         });
76.         // 等待所有上传请求完成
77.         Promise.all(uploadPromises)
78.           .then(resolve)
79.           .catch(reject);
80.       },
81.       fail: (err) => {
82.         reject(new Error("选择照片失败"));
83.       },
84.     });
85.   });
86. }

复制代码

功能解析

1. 1.        文件格式校验：我们定义了一个 validateImageType 函数，用于确保用户上传的文件是 JPG、JPEG、PNG 格式。
2. 2.        文件大小校验：通过 validateImageSize 函数，限制用户上传图片的大小不超过 5MB。
3. 3.        多张图片上传：通过传递 count 参数，我们支持用户一次选择多张图片，并且批量上传到服务器。
4. 4.        错误处理：我们捕获了图片选择、上传、以及服务器响应中的错误，并在失败时返回详细的错误信息。

复制代码

三、页面调用示例

下面是如何在小步伐的页面中调用这个封装好的图片上传功能：

1. import { uploadImages } from './upload';
3. Page({
4.   data: {},
6.   async onUpload() {
7.     try {
8.       const formData = { userId: '123456' }; // 附加的表单数据
9.       const response = await uploadImages(formData, 3); // 上传最多3张图片
10.       console.log('上传成功:', response);
11.     } catch (error) {
12.       console.error('上传失败:', error.message);
13.     }
14.   }
15. });

复制代码

调用解析

1. •        uploadImages(formData, count)：我们通过调用 uploadImages 方法，传递表单数据（如用户 ID）以及允许用户选择上传最多3张图片。整个上传过程是异步的，调用者可以通过 try/catch 块捕获上传过程中可能发生的错误。

复制代码

四、功能改进与扩展

虽然该功能已经可以满意基础的图片上传需求，但我们可以根据具体业务场景进行扩展与优化：
4.1 压缩图片

如果用户上传的图片尺寸较大，我们可以在上传之前调用微信小步伐的 wx.compressImage 接口对图片进行压缩，以镌汰文件体积，提高上传速度。

1. wx.compressImage({
2.   src: file.tempFilePath, // 图片路径
3.   quality: 80, // 压缩质量，0 ~ 100
4.   success: (res) => {
5.     // 将压缩后的图片路径用于上传
6.   }
7. });

复制代码

4.2 上传进度

通过 wx.uploadFile 提供的 onProgressUpdate 事件，我们可以及时获取文件上传的进度并展示给用户，提拔用户体验。

1. wx.uploadFile({
2.   ...,
3.   onProgressUpdate: (progress) => {
4.     console.log('上传进度:', progress.progress);
5.   }
6. });

复制代码

4.3 重试机制

如果图片上传失败，我们可以增长重试机制，比方在上传失败后自动重新上传图片，大概提示用户手动重新上传。
五、总结

通过封装微信小步伐的图片上传功能，我们不仅简化了代码的编写，还增长了文件格式和大小校验、错误处置处罚等功能，极大提拔了代码的复用性与可维护性。这种封装方式实用于任何涉及图片上传的场景，方便在项目中随时调用，并且根据实际需求可以扩展到视频上传、音频上传等其他文件上传场景。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。