微信小程序上传并显示图片

本文介绍: 微信小程序上传并显示图片

实现效果：

上传前显示：

点击后可上传，上传后显示：

源代码：

<view class="{{company_logo_src==''?'blank-area':''}}" style="position:absolute;top:30rpx;right:30rpx;height:100rpx;width:100rpx;text-align:center;font-size:xx-small" bind:tap="upload_company_logo">
  <image wx:if="{{company_logo_src!=''}}" src="{{company_logo_src}}" style="height:100rpx;width:100rpx;"/>
  <label wx:if="{{company_logo_src==''}}">请上传公司logo</label>
</view>

.blank-area{
  border-style: dashed;
  border-color: darkgray;
  border-width: 1px;
}

  upload_company_logo(e){
    wx.chooseMedia({
      count:1,
      mediaType:['image'],
      sourceType: ['album'],
    })
    .then(res=>{
      this.setData({
        company_logo_src: res.tempFiles[0].tempFilePath
      })
    })
    .catch(res=>{
      console.log('error',res)
    })
  }

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。