小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码

淡淡的烟草味﹌ 2022-06-01 10:51 264阅读 0赞

官方文档：//参考

### wx.chooseImage(OBJECT) ###

从本地相册选择图片或使用相机拍照。

OBJECT参数说明：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">参数</th> 
   <th style="">类型</th> 
   <th style="">必填</th> 
   <th style="">说明</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">count</td> 
   <td style="">Number</td> 
   <td style="">否</td> 
   <td style="">最多可以选择的图片张数，默认9</td> 
  </tr> 
  <tr style=""> 
   <td style="">sizeType</td> 
   <td style="">StringArray</td> 
   <td style="">否</td> 
   <td style="">original 原图，compressed 压缩图，默认二者都有</td> 
  </tr> 
  <tr style=""> 
   <td style="">sourceType</td> 
   <td style="">StringArray</td> 
   <td style="">否</td> 
   <td style="">album 从相册选图，camera 使用相机，默认二者都有</td> 
  </tr> 
  <tr style=""> 
   <td style="">success</td> 
   <td style="">Function</td> 
   <td style="">是</td> 
   <td style="">成功则返回图片的本地文件路径列表 tempFilePaths</td> 
  </tr> 
  <tr style=""> 
   <td style="">fail</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用失败的回调函数</td> 
  </tr> 
  <tr style=""> 
   <td style="">complete</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 [wx.saveFile][]，在小程序下次启动时才能访问得到。

success返回参数说明：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">参数</th> 
   <th style="">类型</th> 
   <th style="">说明</th> 
   <th style="">最低版本</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">tempFilePaths</td> 
   <td style="">StringArray</td> 
   <td style="">图片的本地文件路径列表</td> 
   <td style="">&nbsp;</td> 
  </tr> 
  <tr style=""> 
   <td style="">tempFiles</td> 
   <td style="">ObjectArray</td> 
   <td style="">图片的本地文件列表，每一项是一个 File 对象</td> 
   <td style=""><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html" title="基础库 1.2.0 开始支持，低版本需做兼容处理。" style="" rel="nofollow">1.2.0</a></td> 
  </tr> 
 </tbody> 
</table>

File 对象结构如下:

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">字段</th> 
   <th style="">类型</th> 
   <th style="">说明</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">path</td> 
   <td style="">String</td> 
   <td style="">本地文件路径</td> 
  </tr> 
  <tr style=""> 
   <td style="">size</td> 
   <td style="">Number</td> 
   <td style="">本地文件大小，单位：B</td> 
  </tr> 
 </tbody> 
</table>

### 示例代码：     `wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths } })` ###

### wx.previewImage(OBJECT) ###

预览图片。

OBJECT参数说明：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">参数</th> 
   <th style="">类型</th> 
   <th style="">必填</th> 
   <th style="">说明</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">current</td> 
   <td style="">String</td> 
   <td style="">否</td> 
   <td style="">当前显示图片的链接，不填则默认为 urls 的第一张</td> 
  </tr> 
  <tr style=""> 
   <td style="">urls</td> 
   <td style="">StringArray</td> 
   <td style="">是</td> 
   <td style="">需要预览的图片链接列表</td> 
  </tr> 
  <tr style=""> 
   <td style="">success</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用成功的回调函数</td> 
  </tr> 
  <tr style=""> 
   <td style="">fail</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用失败的回调函数</td> 
  </tr> 
  <tr style=""> 
   <td style="">complete</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

示例代码：

wx.previewImage({
      current: '', // 当前显示图片的http链接
      urls: [] // 需要预览的图片http链接列表
    })

以上是官方示例文档；

下面是我自己在开发小程序时遇到的索性就写一下

前台代码：

<button bindtap='chooseImg'>选择图片</button>//调用图片选择和相机
    <view><image src='{
       {img_l}}' bindtap='preview_img'></image></view>//图片上传后预览、保存、识别

js代码：

page({
     data: {
        img_list:''
      },
    chooseImg:function(){//调用
        var _this = this;
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            console.log(res)
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            var tempFilePaths = res.tempFilePaths
            _this.setData({
              img_l: res.tempFilePaths
            })
          }
        })
      },
      preview_img:function(){//预览tupia
        wx.previewImage({
          current: this.data.img_l, // 当前显示图片的http链接
          urls: this.data.img_l // 需要预览的图片http链接列表
        })
      }
    })

效果:

![SouthEast][]  
  
点击选择图片：

![SouthEast 1][]

可以选择本地图片或直接调用相机：

![SouthEast 2][]

**点击图片预览、长按显示选项：**

**![SouthEast 3][]**

[wx.saveFile]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/file.html
[SouthEast]: /images/20220601/3e9667b4e65046a9b11be8a92666705a.png
[SouthEast 1]: /images/20220601/61a1445754064756b2e19dc5f5b69e58.png
[SouthEast 2]: /images/20220601/bc1652a585a841f88a9584db32dc352a.png
[SouthEast 3]: /images/20220601/7d1672942bab464fbf099233ba32085e.png