美文网首页
微信小程序相机/获取相册图库

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

作者: 白番茄_ | 来源:发表于2019-10-10 14:23 被阅读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 () {
    
      }
    })
    

    相关文章

      网友评论

          本文标题:微信小程序相机/获取相册图库

          本文链接:https://www.haomeiwen.com/subject/baaopctx.html