微信小程序相机/获取相册图库

2019-10-10  本文已影响0人  白番茄_
// pages/upPicture/upPicture.js
import utils from '../../utils/util.js';
import {
  Interface,
  Config
} from '../../utils/config.js';
const Host = 'http://XXXX'; //图片上传接口
Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabled: false,
    imgList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  ChooseImage() {  //选择图片或拍照
    wx.chooseImage({
      count: 1, //默认9,像微信一样最大选9张
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], //从相册选择、拍照两个参数
      success: (res) => {
        if (this.data.imgList.length != 0) {
          if (this.data.imgList.length == 1) {
            wx.showModal({
              title: '提示',
              content: '最多只能选一张',
              cancelText: '取消',
              confirmText: '确定',
              success: res => {
                if (res.confirm) { }
              }
            })
          } else {
            this.setData({
              imgList: this.data.imgList.concat(res.tempFilePaths)
            })
          }
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
      }
    });
  },
  ViewImage(e) {   //点击查看大图
    wx.previewImage({
      urls: this.data.imgList,
      current: e.currentTarget.dataset.url
    });
  },
  DelImg(e) {   //删除图片
    wx.showModal({
      title: '删除',
      content: '确定要删除吗?',
      cancelText: '取消',
      confirmText: '确定',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.setData({
            imgList: this.data.imgList
          })
        }
      }
    })
  },
  upPicture: function () {  //上传图片
    var _this = this; 
    if (_this.data.imgList.length != 0) {
      wx.showLoading({
        title: '运行中...',
      })
      this.setData({
        disabled: true
      });
      wx.uploadFile({
        header: {
          'content-type': 'multipart/form-data;charset=utf-8'
        }, // 设置请求的 header
        url: Host + Interface.upPicuture,
        filePath: _this.data.imgList[0],  //微信是获取到本地的图片路径
        name: 'multipartRequestFile',  //需要一个前后端统一的fileName名字
        formData: {                               //其他参数用formData传递
          openId: wx.getStorageSync('openId') || ''
        },
        success: function (res) {
          wx.hideLoading();
          _this.setData({
            disabled: false
          });
          if (res.statusCode == 200 && JSON.parse(res.data).status == 'success') {
            wx.navigateTo({
              url: '../result/result?id= ' + JSON.parse(res.data).id
            })
            return
          } else {
            wx.showToast({
              title: JSON.parse(res.data).message,
              icon: 'none',
              duration: 1000,
              mask: true
            });
          }
          return
        },
        fail: function (res) {
          wx.hideLoading();
          _this.setData({
            disabled: false
          });
          wx.showToast({
            title: '请求错误',
            icon: 'none',
            duration: 1000,
            mask: true
          });
        }
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '请选择一张图片',
      })
      return;
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

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

  },

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

  }
})
上一篇下一篇

猜你喜欢

热点阅读