Colorful-childhood/pages/album/album.js

// pages/album/album.js
const HOST = require('../../utils/const.js').apiUrl;
import httpRequestApi from '../../utils/APIRequest';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    stateFlag: true,
    photoList: [],
    photoBoxToken: []
  },

  //更改相册
  setState: function () {
    this.setData({
      stateFlag: !this.data.stateFlag
    })
    const photoBox = this.data.stateFlag ? 'OPEN' : 'PRIVACY';
    wx.setStorageSync('photoBox', photoBox);
    httpRequestApi.setPhoto(photoBox).success(res => {
      const photoBoxToken = this.data.stateFlag ? [] : res.data.data.photoBoxToken.toString().split('');
      this.setData({
        photoBoxToken,
      })
    });
  },
  //上传相册
  addPhoto: function () {
    const userInfo = wx.getStorageSync('userInfo');
    if(!userInfo.data.data.mobileNo || !userInfo.data.data.avatar) {
      wx.navigateTo({
        url: '/pages/setName/setName'
      })
      return false;
    };
    if(this.data.photoList.length >= 15) {
      wx.showModal({  
        title: '温馨提示',  
        content: '只能上传15张图片'
      }) 
      return false;
    };
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success:  (res) => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        //启动上传等待中...  
        wx.showToast({  
          title: '正在上传...',  
          icon: 'loading',  
          mask: true,  
          duration: 1000 
        }) 
        const that = this;
        let uploadImgCount = 0;  
        tempFilePaths.forEach(item => {
          //上传文件
          wx.uploadFile({  
            url: HOST + 'wx/file/upload',  
            filePath: item,  
            name: 'uploadfile_ant',  
            header: {  
              "Content-Type": "multipart/form-data"  
            },  
            success: (res) => {  
              uploadImgCount++; 
              const data = JSON.parse(res.data);
              if(data.success) {
                //上传文件成功后放到相册里
                httpRequestApi.addPhotoList({
                  path: data.data
                }).success((res) => {
                  if(res.data.success) {
                    //再次调用相册列表
                    that.getPhotoList();
                  }
                }).fail(() => {
                  wx.showModal({  
                    title: '错误提示',  
                    content: '图片上传到相册失败'
                  }) 
                });
              }
              //如果是最后一张,则隐藏等待中  
              if (uploadImgCount == tempFilePaths.length) {  
                wx.hideToast();  
              }  
            },  
            fail: function (res) {  
              wx.hideToast();  
              wx.showModal({  
                title: '错误提示',  
                content: '上传图片失败'
              })  
            }  
          });  
        });
      }
    })
  },

  //预览图片
  preview: function ({ currentTarget }) {
    // const index = currentTarget.dataset.index;
    // console.log(this.data.photoList[index].path);
    const imageUrl = [];
    for (let item of this.data.photoList) {
      imageUrl.push(item.path)      
    }
    wx.previewImage({
      urls: imageUrl
    })
  },

  //删除相册
  removePhoto: function ({ currentTarget }) {
    httpRequestApi.removePhotoList(currentTarget.dataset.id).success((res) => {
      console.log('删除册列表', res);
      if(res.data.success) {
        this.getPhotoList();
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getPhotoList();
    //初始化相册是否加密
    const photoBox = (wx.getStorageSync('photoBox') === 'OPEN' ? true : false);
    this.setData({
      stateFlag: photoBox
    })
    if(!photoBox) {
      httpRequestApi.setPhoto(wx.getStorageSync('photoBox')).success(res => {
        const photoBoxToken = this.data.stateFlag ? [] : res.data.data.photoBoxToken.toString().split('');
        this.setData({
          photoBoxToken,
        })
      });
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  //获取相册列表
  getPhotoList: function () {
    httpRequestApi.getPhotoList({
      pageNo: 1,
      pageSize: 15
    }).success((res) => {
      console.log('相册列表', res.data.data.list);
      this.setData({
        photoList: res.data.data.list
      })
    })
  }

})