在这个 uploader__file 组件的上面，可以给它绑定一个 tap 事件 .. 用 onPreviewImage 方法来处理 .. 按一下它可以预览图片 ..

再添加一个 data-src ，这是一个自定义的 data 属性 .. 对应值设置成 item .. 我们要使用这个属性的值来判断在预览的时候当前要显示的图片 ..

然后再找到选择图片的按钮 ..

在它的上面，再绑定一个 tap 事件 .. 用 onChooseImage 方法来处理 ..

## 逻辑

回到页面的逻辑文件 .. 在页面上，去定义需要的事件处理方法.. 先添加一个 onChooseImage 方法 ..

在这个方法里用一下 wx.chooseImage .. 这个接口可以打开选择图片的窗口 ..

给它一个对象参数 .. 先设置一下 count 选项的值，先让它等于 1 .. 就是只能让用户选择一张图片 ..

sizeType 是图像的尺寸类型 .. 添加一个 original .. 表示原始图片 ..

sourceType 可以设置一下图片的来源 .. 图片可以来自 album ，就是相册 .. 也可以用 camera 去拍一张 ..

成功以后会调用 success 方法 .. 添加一个这样的方法 .. 得到的响应是 response ..

里面用一下 this.setData 设置一下页面上的 images 这个数据的值 .. 对应的值设置成 response 里面的 tempFilePaths ... 这个属性的值就是用户选择的图片的临时路径 ..

在页面的数据里面，可以添加一个 images .. 默认让它等于一个空白的数组 ..

## 预览

先到模拟器上去试一下 .. 按一下选择图片的按钮 .. 会打开文件浏览窗口 .. 如果是在手机上 .. 会提示用户是要从手机相册里选择，还是要用相机直接去拍一张 ..

找一张图片 .. 打开 ..

用户选择的图片会显示在页面上 ...

## 图片预览
现在按一下这个图片还不能预览 .. 再回到页面逻辑 ..

预览图片可以使用小程序给我们提供的 wx.previewImage 这个接口 ..

先去添加一个事件处理方法 .. 名字是 onPreviewImage .. 方法接收一个 event 参数 ..

在它里面用一下 wx.previewImage .. 给它一个对象参数 ..

current 属性是当前要显示的图片路径 .. 这里可以使用 event.target.dataset.src 里面的值 .. 这个值就是我们在图片包装上面添加的 data-src 属性的值 ..

urls 是要预览的一组图片的路径 ... 这组路径就是用户选择的图片 .. 我们把用户选择的图片的临时路径放在页面上的 images 这个数据里了 ..

## 预览

再到模拟器上去预览一下 .. 按一下选择图片 ... 选择一张图片 .. 打开 ..

然后再按一下在页面上显示的这个图片 .. 这样会打开一个图片的预览窗口 .. 再按一下它 .. 会回到之前显示的这个页面 ..