小程序图片上传

最新推荐文章于 2023-02-06 22:17:21 发布

原创最新推荐文章于 2023-02-06 22:17:21 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序上传图片

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

小程序

5 篇文章

订阅专栏

博客介绍了小程序图片上传的实现方法，需分别在wxml、js、wxss页面进行编写，还可引入weui官方提供的适合小程序开发的组件，给出了weui的github下载路径，完成这些操作即可实现图片上传功能。

小程序图片上传

去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;
}