小程序图片上传

小程序图片上传

去wxml页面 编写 代码片.

<!-- 加工图片/视频 -->
    <view class="company-news-block">
      <view class="company-news-name">
        <view class="company-news-left">加工图片/视频</view>
      </view>
      <!-- 传图 -->
      <view class="weui-uploader__bd">
        <view class="company-news-picture">
          <block wx:for="{{files}}" wx:key="*this">
            <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
            </view>
          </block>
          <view class="weui-uploader__input-box">
            <view class="weui-uploader__input" bindtap="chooseImage"></view>
          </view>
        </view>
      </view>
    </view>

去js页面 编写 代码片.

  /**
   * 页面的初始数据
   */
    data: {
        files: []   //图片
    },
        
    //上传图片事件
  chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          files: that.data.files.concat(res.tempFilePaths)
        });
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files // 需要预览的图片http链接列表
    })
  },

 onLoad: function (options) {

  },

去wxss页面 编写 代码片.

/* 图片 */
@import '../../../style/weui.wxss';  //根据自己路径引入
.company-news-block{
  margin-bottom: 10rpx;
  text-align: center;
  background:#ffffff;
}
.company-news-block .weui-uploader__bd{
  margin-bottom:0;
}
.weui-uploader__input-box{
  margin-left:40rpx;
}
.weui-uploader__img{
  margin-left:40rpx;
}
.company-news-name{
  padding-left:40rpx;
  height:90rpx;
  line-height: 90rpx;
  display:flex;
  justify-content: space-between;
  border-bottom:1px solid #f4f4f4;
}
.company-news-right{
  color:#a0a0a0;
}
.company-news-h{
  display:flex;
}
.company-news-name>.company-news-h>image{
  width:26rpx;
  height:26rpx;
  margin-top:28rpx;

}
.company-news-picture{
  padding-top:20rpx;
  padding-bottom:20rpx;
  width:100%;
  height:180rpx;
}
.crops-bottom{
  position:fixed;
  opacity:0.95;
  background-color:#fff;
  display:flex;
  justify-content:space-around;
  align-items:center;
  width:750rpx;
  height:80rpx;
  bottom:0;
  color:white;
  background:#446ca9;
  font-size: 24rpx;
}

weui官方提供的一套 适合小程序开发组件，直接clone下来，放到开发文件中引入即可实现。。。，

weui——github下载路径：https://github.com/15171222839/newsCountry/tree/master/newsInVillage/style

完成上述操作就可实现此功能

拿着 不谢 请叫我“锤” 谢谢！！！