返回

图解 Uniapp 小程序图片上传，轻松搞定实名认证和头像上传！

前端

Uniapp 小程序图片上传指南：从头到尾的详细步骤

选择图片

选择图片是图片上传过程中的第一步。Uniapp 小程序提供了两种选择图片的方式：

  • 原生 wx.chooseImage API： 仅支持选择本地图片。
  • uni.chooseImage API： 支持选择本地图片和拍照。
uni.chooseImage({
  count: 1, // 默认 9
  sizeType: ['original', 'compressed'], // 指定原图或压缩图，默认为两者都有
  sourceType: ['album', 'camera'], // 指定来源为相册或相机，默认为两者都有
  success: (res) => {
    // tempFilePath 可作为图片标签的 src 属性显示图片
    const tempFilePaths = res.tempFilePaths;
  },
});

压缩图片

为了减少图片大小并加快上传速度，可以在上传之前对图片进行压缩。Uniapp 小程序提供了 uni.compressImage API 来完成此操作。

uni.compressImage({
  src: tempFilePath, // 图片路径
  quality: 80, // 压缩质量，默认 90
  success: (res) => {
    // tempFilePath 可作为图片标签的 src 属性显示图片
    const tempFilePath = res.tempFilePath;
  },
});

上传图片

上传图片是将压缩后的图片发送到服务器的过程。Uniapp 小程序有两种上传图片的方法：

  • 原生 wx.uploadFile API： 仅支持上传到微信服务器。
  • uni.uploadFile API： 支持上传到任意服务器。
uni.uploadFile({
  url: 'https://example.com/upload', // 上传地址
  filePath: tempFilePath, // 图片路径
  name: 'file', // 文件名
  formData: { // 其他参数
    user: 'test',
  },
  success: (res) => {
    // data 是上传图片的路径
    const data = res.data;
  },
});

总结

以上步骤介绍了如何在 Uniapp 小程序中实现图片上传。从选择图片到压缩和上传，每个步骤都至关重要。希望本指南对您的移动端开发需求有所帮助。

常见问题解答

  1. 如何选择多张图片？

    uni.chooseImage({
  count: 9, // 设置可选择图片的数量
});

  2. 如何自定义图片大小和质量？

    uni.compressImage({
  src: tempFilePath,
  quality: 60, // 设置压缩质量
  size: [200, 200], // 设置压缩后的图片尺寸
});

  3. 如何上传到特定的服务器？

    uni.uploadFile({
  url: 'https://my-custom-server.com/upload', // 指定上传地址
});

  4. 如何获取上传进度？

    uni.uploadFile({
  filePath: tempFilePath,
  success: (res) => {
    const progress = res.progress; // 上传进度
  },
});

  5. 如果上传失败，如何处理？

    uni.uploadFile({
  filePath: tempFilePath,
  fail: (err) => {
    // 处理上传失败
  },
});