基于云开发的微信小程序-miNi相册（主页与上传图片功能）

这节主要的是介绍主界面功能介绍。

可以看到，主要是实现上传图片的功能，然后前往大厅的话就是一个纯属跳转的按钮。

微信的个人信息（名字头像）都是在前面登录的页面已经获取存储到全局变量中。

 

 

接下来开始上代码。

首先是wxml部分

<view class="bigest">
  <view class="toux">
    <image src='{{Head_picture}}' class="c_tx"></image>
    <text class="username" >{{Username}}</text>
    <text class='time'>{{Time}}</text>
    <image src='/images/bg2.png' class='c_1'></image>
  </view>

  <view class='sc' >
    <view class='sctp'>
    <image style="width: 32px; height: 32px;" src='../../images/up_pic1.png'mode='aspectFit' bindtap='doupLoad'></image>
    </view>
    <view class='sctp_tx'><text>上传图片</text></view>
    
    <view class='gogo'>
    <image style="width: 32px; height: 32px;" src='../../images/kj.png'mode='aspectFit' bindtap='toPublic_place'></image>
    </view> 
    <view class='go_tx'><text>前往大厅</text></view>
    
  </view>
  <view class='tp' >
    <image src='/images/bg.png' class='c_3' ></image>
  </view>
</view>

 下面是js部分：

先定义接下来要使用的变量。

data: {
    avatarUrl: '',
    Username:'',
    Time: '',
    Head_picture:'',
    Filepath:''
  },

首先这是获取信息填入指定位置。

 onLoad: function (options) {
   var that=this
    wx.getStorage({
      key: 'key',
      success(res) {
        console.log(res);
        that.setData({
          Username: res.data.nickName,
          Time: util.formatTime(new Date()),
          Head_picture: res.data.avatarUrl
        });
        
      }
    }) 
  },

跳转部分：

toPublic_place:function(){
    wx.navigateTo({
      url: '/pages/Public_place/Public_place',
    })
  },

 

 这节最主要的部分就是接下来的上传图片的代码，调用的是wx.chooseImage函数，在函数里面使用Promise.all方法，

使用Map()进行上传照片的处理（Filepath应该是一个Array形式存储着照片），调用云开发函数wx.cloud.uploadFile，

参数cloudPath是云存储路径，这里我使用一个时间戳，还有把后缀保留下来，这里为什么会加一个random呢，

如果不加的话会出现一个可以复现的bug（大家可以尝试一下不加会出现什么后果，留一个悬念）。

调用success 后会返回参数fileId、statusCode、errMsg三个字段，我们只需存取fileId，所以使用Map()取fileId形成Array格式

到这里就开始对数据库进行操作了，初始化，对哪个表操作：

const db = wx.cloud.database();
const add_record_Collection = db.collection('Record_picture');

 然后使用云开发数据库的add，把数据格式填入即可。

add_record_Collection.add({

          data: {
              Name: that.data.Username,
              Time: JSON.stringify(util.formatTime(new Date())),//-401003:code
              Head_picture: that.data.Head_picture,
              Picture_map: res,
              Vote: 0
            }
          });

上传图片完整js代码如下：

doupLoad:function(){
    var that=this
      // 选择图片
      wx.chooseImage({
        count: 9,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {    
          
          that.setData({
            Filepath: res.tempFilePaths
          }),
        console.log(that.data.Filepath);
        wx.showLoading({
            title: '上传中',
        })
    
       Promise.all(that.data.Filepath.map((value) => {
            return wx.cloud.uploadFile({
              cloudPath: Date.now() + parseInt(Math.random() * 100) + value.match(/\.[^.]+?$/)[0],
              filePath: value,
            })
          })).then(res=>{
          return res.map((res) => {
              return res.fileID
            });
        }).then(res=>{
          const db = wx.cloud.database();
          const add_record_Collection = db.collection('Record_picture');
          add_record_Collection.add({

          data: {
              Name: that.data.Username,
              Time: JSON.stringify(util.formatTime(new Date())),//-401003:code
              Head_picture: that.data.Head_picture,
              Picture_map: res,
              Vote: 0
            }
          });
        }).then(res => {
          wx.hideLoading();
              wx.showToast({
                title: '成功',
                icon: 'success',
                duration: 1000
              })
          setTimeout(function () {
            wx.redirectTo({
              url: '/pages/Public_place/Public_place',
            })
          }, 1000);
              
            }).catch((exp) => {
              console.log(exp);
            })
     }});
  },

这节完。主要是上传图片的功能使用了Promise和Map。

微信小程序云开发文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html