微信小程序上传照片，限制格式，限制大小，公用方法

最新推荐文章于 2025-04-27 15:39:49 发布

生生不息的希望

最新推荐文章于 2025-04-27 15:39:49 发布

阅读量1.1w

点赞数 9

分类专栏：微信小程序点滴累积文章标签：小程序上传照片

本文链接：https://blog.csdn.net/weixin_39589065/article/details/102369626

版权

点滴累积同时被 2 个专栏收录

13 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

本文详细介绍了在微信小程序中实现图片上传功能的方法，包括如何选择图片、预览、压缩及上传图片到服务器的全过程。文章重点讲解了利用微信小程序API进行图片操作的具体步骤，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法

/**
 * 选择上传照片
 * page_that:调用方法的页面，
 * cb_key:返回参数数组的名称
 * count:上传张数
 * 返回值：数组
 */
function selecImg(page_that, cb_key, count) {
  console.log("选择图片");
  wx.chooseImage({
    count: count,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
      console.log(res)
      var pathArray = [];
      var PicNums = res.tempFiles.length;
      for (var inta = 0; inta < PicNums; inta++) {
        var size = res.tempFiles[inta].size;
        var path = res.tempFiles[inta].path;
        var formatImage = path.split(".")[(path.split(".")).length - 1];
        console.log("图片格式" + formatImage)
        if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
          return wx.showToast({
            title: '只能上传.png、.jpg、.jpep 格式',
            icon: 'none',
            image: '',
            duration: 2000,
            mask: true,
          })
        }
        if (config.image_size < size) {
          return wx.showToast({
            title: '图片大小限制:' + (config.image_size / 1024 / 1024) + "MB",  ///config.image_size 配置文件中设置
            icon: 'none',
            image: '',
            duration: 1500,
            mask: true,
          })
        }
        pathArray.push(path);
        if (inta == PicNums-1) {
          var cb = {};
          cb[cb_key] = pathArray;
          page_that.setData(cb);
        }
      }
    }
  })
}

.wxml

<image src="../../Image/bg_pic1.png" mode='widthFix' style="width:100px" bindtap='Oncarm' data-whopic='idcard'></image>

.js 调用


  Oncarm: function(e) {
    var whopic = e.currentTarget.dataset.whopic;
    /**
     * page_that:调用方法的页面，
     * cb_key:返回参数数组的名称,
     * count:上传张数,
     * 返回值：数组
     */
    util.selecImg(this, whopic, 1);
  },

在这里插入图片描述