zoukankan      html  css  js  c++  java
  • 微信小程序-上传图片

    注意:图片目前只是上传到了内存

    使用

     wx.chooseImage({
          count: 6,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
    ……

     

    样式:

    wxml:

    <view bindtap="uploadImage" >请上传图片</view>
    <view class="container">
    <view  wx:for="{{imageList}}" wx:key="index">
      <image  src="{{item}}" ></image>
    </view>
    </view>

    wxss:

    .container image{
      width: 200rpx;
      height: 200rpx;
      padding: 5rpx;
      display: flex;
      flex-direction: row;
    }
    
    .container {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       flex-wrap:wrap; /*实现图片换行展示*/
    }

    js:

    uploadImage: function(e) {
        //注意:图片目前只是上传到了内存。
        var that = this;
        wx.chooseImage({
          count: 6,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: function(res) {
            // 设置imageList,页面上图片自动修改。
            console.log(res)
            // that.setData({
            //   //覆盖原有图片
            //   imageList: res.tempFilePaths
            // });
    
            // 默认图片 + 选择的图片; 
            that.setData({
              //列表拼接
              //l1=[1,2] l2=[3,4] l1.concat(l2)=[1,2,3,4] 类似于python中extend
              imageList: that.data.imageList.concat(res.tempFilePaths)
            });
          },
          fail:function(res){
    
          },
          complete: function (res) {
              console.log('无论如何都执行')
          }
        });
      },

  • 相关阅读:
    11个有用的移动网页开发App和HTML5框架
    移动平台前端开发总结(针对iphone,Android等手机)
    uploadify按钮中文乱码问题
    @page指令 validateRequest的作用
    C#,.net获取字符串中指定字符串的个数、所在位置与替换字符串
    lambda函数
    主函数
    Python函数
    猴子
    旋转
  • 原文地址:https://www.cnblogs.com/xiao-apple36/p/12804493.html
Copyright © 2011-2022 走看看