微信小程序> 微信小程序上传图片并预览

微信小程序上传图片并预览

浏览量:653 时间: 来源:眼睛微微笑

小程序

<view>     <view class='title'>          上传图片      </view>      <view class='imgArr'>          <view wx:for="{{imgArrs}}" class='img_item'>              <image src='{{item}}' mode='widthFix' bindtap='previewImage' data-item="{{item}}"  />          </view>          <view class='addImg' bindtap='chooseImage'>              <image  src='http://etc-app.oss-cn-beijing.aliyuncs.com/image_201905301537160389.png' mode='widthFix' />          </view>      </view></view>
.addImg {  width: 122rpx;height: 122rpx; }.imgArr image {  display: inline !important;  width: 100%;  height: 100%;}.imgArr view {  display: inline-block;  margin: 10rpx;}.img_item {    width: 122rpx;height: 122rpx;   border: 1rpx solid #e5e5e5;  position: relative;}.title {  height: 96rpx;  line-height: 96rpx;  font-size: 32rpx;font-weight: normal;font-stretch: normal;letter-spacing: 1rpx;color: #333333;}
 data: {    imgArrs:[],//加一个图片显示一张    idArrs:[]//存放每张图片标识符id  },  /**   * 组件的方法列表   */  methods: {    chooseImage() {      let that = this      wx.chooseImage({        count: 1,        sourceType: ['album', 'camera'],        success(res) {          // tempFilePath可以作为img标签的src属性显示图片          const path = res.tempFilePaths[0]          wx.uploadFile({            url: '要上传的地址',            filePath: path,            name: 'image',            success: (res) => {              console.log(res)              // 根据查看结果是否需要json化              let {url, id } = JSON.parse(res.data).data              console.log(url)              console.log(id)              that.data.imgArrs.push(url)              that.data.idArrs.push(id)              that.setData({                imgArrs: that.data.imgArrs,                idArrs: that.data.idArrs              })              console.log(that.data.imgArrs)              console.log(that.data.idArrs)            }          })        }      })    },    // 图片预览    previewImage(e) {      console.log(e)      let that = this      wx.previewImage({        urls: that.data.imgArrs,        current: e.target.dataset.item,      })    }  }
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎