小程序之选择拍照或者本地相册

html

<!--pages/testdemo/testdemo.wxml-->
<view class="">
    <view class="container">
        <view class='img_body'>
            <view class='img_list'>
                <view class='img_li' wx:for="{{imglist}}" wx:key="{{index}}">
                    <image src="{{item}}"></image>
                </view>
                <view class='addimg' bindtap='img_w_show'>
                    <image src='../../imgs/add.png'></image>
                </view>
            </view>
        </view>
    </view>
</view>

css

.img_list {
    width: 100vw;
    display: flex;
    display: -webkit-flex;
    padding: 0 20rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.img_list .img_li,
.addimg {
    width: 200rpx;
    height: 250rpx;
    border: 1px solid #999999;
    margin: 5rpx;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.addimg image {
    width: 150rpx;
    height: 150rpx;
    margin: 50rpx 25rpx;
}

.img_list .img_li image {
    width: 100%;
    height: 100%;
}

只是一个弹框

 imglist: [
      "https://img.yzcdn.cn/vant/cat.jpeg",
      "https://img.yzcdn.cn/vant/cat.jpeg"
    ]
  img_w_show() {
    // 弹框 是相机拍照还是 从相册中选择的哈
    wx.showActionSheet({
      itemList: ["从手机相册选择", "拍照"],
      success: function(res) {

        <!-- 判断你自己选择的是相机还是相机  -->
        console.log("选择的是 :", res.tapIndex);

        let sourceType = "camera";
        if (res.tapIndex == 0) {
          sourceType = "camera"; //相机
        } else if (res.tapIndex == 1) {
          sourceType = "album"; //相册
        }

      },
      fail: function(res) {
        console.log(res.errMsg);
      }
    });
  }

选择本地相册图片 或者是 相机拍照

  var _this = this;
    wx.showActionSheet({
      itemList: ["拍照", "从相册中选择"],
      success(res) {
        console.log("选择的是 :", res.tapIndex);
        let sourceType = "camera";
        if (res.tapIndex == 0) {
          sourceType = "camera"; //相机
        } else if (res.tapIndex == 1) {
          sourceType = "album"; //相册
        }

        wx.chooseImage({
          count: 9,
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: [sourceType],
          success: function(res) {
            var tempFilePaths = res.tempFilePaths;
            console.log(tempFilePaths);//图片路径为 https
            _this.setData({
              imglist: _this.data.imglist.concat(tempFilePaths)
            });
          }
        });
      }
    });

点击加号直接拍照

  img_w_show() {
    var _this = this;
    // 只是单纯的嗲用是拍照 还是相册中选择弹框

    let sourceType = "camera";

    //  从本地相册选择图片或使用相机拍照。
    wx.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: [sourceType],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths); //图片路径为 https
        _this.setData({
          imglist: _this.data.imglist.concat(tempFilePaths)
        });
      }
    });
  },

原文地址:https://www.cnblogs.com/IwishIcould/p/12247166.html

时间: 2024-11-13 08:09:13

小程序之选择拍照或者本地相册的相关文章

使用uni-app开发小程序,关于小程序更新后与用户本地不会及时更新解决办法

1.原因分析 在小程序更新开发版本之后,用户本地并没有对之前版本的小程序进行删除,那么再进入小程序的时候的版本是不会发生变化的,这是由于发版是异步执行,因此新版本将会覆盖的比较慢,本质是小程序的启动方式分为两种,冷启动与热启动. 冷启动:指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动.热启动:指用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程并不会重新加载启动. 2.解决方案 为了在小程序每

微信小程序-工具无法加载本地模拟开发服务的解决办法

微信小程序开发工具出现如下问题: 因为网络代理软件或者 VPN 影响,工具无法加载本地模拟开发服务  请尝试以下任一解决方案1.关闭相关网络代理软件,重新编译成功后,再启动相关网络代理软件: 2.配置相关软件不针对 *.appservice.open.weixin.qq.com 和 *.debug.open.weixin.qq.com 进行代理: 3.配置相关软件不针对 开发者工具 做代理 但是根本没用任何代理,找了很多方法,最终解决: 设置windows防火墙,允许微信web开发者工具使用网络

【微信小程序】开发实战 之 本地数据缓存API

每个小程序都可以有自己的本地缓存,可以通过数据缓存的API实现对本地缓存进行设置.获取和清理.本地缓存最大为10M. 设置本地缓存 1?wx.setStorage(OBJECT) 该接口是异步接口,用于将数据存储在本地缓存中指定的key中.会覆盖掉该key对应的原来的内容. 该接口参数: 参数key,     string类型,         必填项,本地缓存中指定的key. 参数data,   object/string类型,必填项,需要存储的内容. 参数success,fail,compl

转:微信小程序之缓存,(本地缓存,同步缓存,异步缓存)

转自CSDN:https://blog.csdn.net/Jensen_Yao/article/details/79480717?utm_source=blogxgwz1 关于本地缓存1. wx.setStorage( wx.setStorageSync). wx.getStorage( wx.getStorageSync). wx.clearStorage( wx.clearStorageSync) 可以对本地缓存进行设置. 获取和清理. 本地缓存最大为10MB 2. localStorage

小程序在选择某一个东西的时候,可以用if,else 来做

<view class='fake-select-item-text brand-selected' wx:if='{{selectedBrandName}}'> {{selectedBrandName}} </view> <view wx:else class='fake-select-item-text'>品牌</view> 先判断选择的值存不存在,存在的话就上面的,不然就用下面的 原文地址:https://www.cnblogs.com/antyhou

微信小程序城市选择插件

实现搜索城市功能和通过首字母选择城市 js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 scrollTopId: '',//置顶id city: "", cityList_sear

小程序开发实践总结

从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹.我司也不例外,我们整个前端团队这半年来基本上都是在开发小程序.前前后后也开发了四五个小程序了.总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑. 那些年我们踩过的坑 css样式不能引用本地图片资源,只能引用线上资源(background-image),引用本地图片资源只能用<image>标签. {{}}不能执行函数方法,{{}}只支持基本的简单运算和ES6拓展运算符.如价格格式化这种常用的处理,只能在js

Android上传图片之调用系统拍照和从相册选择图片

Android上传图片之调用系统拍照和从相册选择图片 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015年12月17日下午发了第一篇博文,现在是2016年4月6日.时间间隔长的过分啊,我自己都看不下去了.原因呢?当然是自己的原因,其实是有很多时间来些博客的,但是这些时间都花在DOTA上了(还是太年轻啊).请原谅我的过错--. 一.概述: 现在几乎应用都会用到上传图片的功能,而要上传图片,首先得选择图片,本文不针对如何上传图片到服务器(每个项目与服务器交互的方式不同,因

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇