微信小程序开发之十五—— 图片、文件与缓存

学习前后

上一篇：微信小程序开发之十四 —— 数据表单
下一篇：微信小程序开发之十六 —— 云开发入门

补充

使用weui样式

刚开始写时没注意到，现在补充一下,。

之前的文章也进行了补充：微信小程序开发之五 —— 体验WeUI

首先我们在模板小程序的根目下新建一个style的文件夹(如果已经有了就不用建了)，然后把weui小程序dist/style目录下的weui.wxss文件粘贴到style的文件夹里。

使用开发者工具打开模板小程序的app.wxss文件的第二行添加以下代码：

@import 'style/weui.wxss';

这样weui的css样式就被引入到我们的小程序中啦.

图片操作

官方文档：wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。

属性	类型	默认	说明
count	number	9	最多可以选择的图片张数
sizeType	Array	[‘original’,‘compressed’]	所选的图片的尺寸
sourceType	Array	[‘album’,‘camera’]	选择图片来源

object.sizeType的合法值

值	说明
original	原图
compressed	压缩图

object.sourceType的合法值

值	说明
album	从相册选图
camera	使用相机

object.success回调函数
Object res

属性	类型	说明
tempFilePaths	Array	图片的本地临时文件路径列表(本地路径)
tempFiles	Array	图片的本地临时文件列表

res.tempFiles的结构

属性	类型	说明
path	string	本地文件路径(本地路径)
size	number	本地临时文件大小，单位B

上传一张图片

,wxml输入

<button type="primary" bindtap="chooseImage">选择图片</button>
<view wx:if = "{{hasImg === true}}">
	<image mode="widthFix" src="img"></image>
</view>
<view>上传的图片</view>

在.js里添加图片数据变量

 data: {
    img:"",
    hasImg: false,
  },

根据文档内容设置绑定函数，这里要把this赋值给that，控制台输出会发现进入回调函数后this变成了undefined。

chooseImage:function(e){
    console.log(e)
    let that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original','compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log('this是啥', this)
        console.log('that是啥', that)
        console.log('chooseIamge的res',res)
        const img = res.tempFilePaths
        that.setData({
          img,
          hasImg: true,
        })
      },
    })
  },

可以更改sizeType和sourceType的值在手机里体会一下不同之处，两个值表示的是两个都允许。
现在就可以上传一张图片了。

上传多张图片

把数据改成数组,把绑定函数的count改成2-9就可以了

data: {
    img:[],
    hasImg: false,
  },

.wxml

<button type="primary" bindtap="chooseImage">选择图片</button>

<view wx:if = "{{hasImg === true}}">
  <view class="page__bd">
    <view class="weui-grids">
      <block wx:for="{{img}}" wx:for-item="item" wx:key="*this">
        <navigator url="" class="weui-grid" hover-class="weui-grid_active">
          <image class="weui-grid__icon" src="{{item}}" style="width:90px;height:90px;"/>
        </navigator>
      </block>
    </view>
  </view>
<view>上传的图片</view>

给它加了个样式让其按九宫格形式展示。
效果：

获取图片信息

官方文档：wx.getImageInfo(Object object)

我们先获取图片信息首先先要上传图片后才可以，所以获取图片信息函数要写在wx.chooesImage()的success的回调函数里面调用wx.getImageInfo()，然后观察控制台就可以看到图片信息了。

 chooseImage:function(e){
    console.log(e)
    let that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original','compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log('this是啥', this)
        console.log('that是啥', that)
        console.log('chooseIamge的res',res)
        const img = res.tempFilePaths
        that.setData({
          img,
          hasImg: true,
        })
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          //也可以这么写：src: that.data.imgurl[0],这里只能看到第一张照片的信息，其他照片的信息需要遍历来获取
          success(res) {
            console.log('getImageInfo回调打印的res', res)
          }
        })
      },
    })
  },

预览图片

官方文档：wx.previewImage(Object object)

我们可以设置一个按钮绑定预览操作，但更友好的做法是点击图片可以进行预览，所以在前面的图片那个添加一个绑定事件即可。

 <image class="weui-grid__icon" src="{{item}}" style="width:90px;height:90px;" bindtap="previewImg" />

绑定函数：

previewImg: function (e) {
    console.log('previewImg的e',e)
    wx.previewImage({
      current: '',
      urls: this.data.img,
    })
  },

效果：

保存图片到本地与压缩图片

官方文档：wx.saveImageToPhotosAlbum(Object object)，wx.compressImage(Object object)
比较简单的操作，大家自行动手编写一下即可，注意一下小程序不支持直接将网络图片保存到本地手机的系统相册，支持临时文件路径和小程序本地路径。

文件操作

官方文档：wx.chooseMessageFile(Object object)
从客户端会话选择文件。

属性	类型	默认值	说明
count	number	|必填，最多可以选择的文件个数，可以 0～100
type	string	‘all’	所选文件类型
extension	Array	/	根据文件拓展名过滤，仅 type==file 时有效。每一项都不能是空字符串。默认不过滤。

object.type的合法值

值	说明
all	从所有文件选择
video	只能选择视频文件
image	只能选择图片文件
file	可以选择除了图片和视频之外的其他的文件

这个实现起来很简单了，然后我们把获取到的信息给渲染出来，代码如下：

data: {
    tempFiles:[],
  },

 chooseFile: function () {
    let that = this
    wx.chooseMessageFile({
      count: 5,
      type: 'file',
      success(res) {
        let tempFiles = res.tempFiles
        that.setData({
          tempFiles
        })
      }
    })
  },

<button type="primary" bindtap="chooseFile">选择文件</button>
<button bindtap="chooseFile">选择文件</button>
<view wx:for-items="{{tempFiles}}" wx:for-item="item" wx:key="*this">
  <view>{{item.path}}</view>
</view>

另外还有个上传地理位置的wx.chooseLocation(Object object)，大家可自行尝试一下。

数据缓存Storage

官方文档：wx.setStorageSync(string key, any data)，wx.getStorageSync(string key)

保存文件

官方文档：wx.saveFile(Object object)
保存文件到本地。注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。

在.wxml里输入

<view>临时文件图片</view>
<image mode="widthFix" src="{{tempFilePath}}" style="width:80px"></image>
<view>缓存保存的图片</view>
<image mode="widthFix" src="{{savedFilePath}}" style="width:80px"></image>
<button type="primary" bindtap="chooseImg">请选择文件</button>
<button type="primary" bindtap="saveImg">保存文件到缓存</button>

在.js添加数据

data: {
    tempFilePath: '',
    savedFilePath: '',
  },

绑定出来函数chooseImg、saveImg

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      success(res) {
        that.setData({
          tempFilePath: res.tempFilePaths[0]
        })
      }
    })
  },
  saveImg: function () {
    const that = this
    wx.saveFile({
      tempFilePath: this.data.tempFilePath,
      success(res) {
        that.setData({
          savedFilePath: res.savedFilePath
        })
        wx.setStorageSync('savedFilePath', res.savedFilePath)
      },
    })
  },

我们把数据存在缓存是为了下次进来时能够显示，所以我们需要在onload函数添加以下代码

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      savedFilePath: wx.getStorageSync('savedFilePath')
    })
  },

当我们点击上传文件按钮时会触发chooseImg函数，将临时文件地址赋值给tempFilePath，然后点击保存文件到缓存的按钮就触发saveImg事件函数，会把缓存地址赋值给savedFilePath，调用缓存wx.setStorageSync()，将缓存文件的路径保存到缓存的key savedFilePath里面。

通过wx.setStorageSync()保存到缓存里的数据，可以使用wx.getStorageSync()获取出来，我们在onLoad里把获取出来的缓存文件路径再赋值给savedFilePath。

效果：