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

实现效果:

上传前显示:

点击后可上传,上传后显示:

源代码:

.wxml

html 复制代码
<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>

.wxss

css 复制代码
.blank-area{
  border-style: dashed;
  border-color: darkgray;
  border-width: 1px;
}

.js

wx.chooseMedia函数参数mediaType可以选择上传类型['image', 'video','mix'],mix是混合图片和视频,sourceType可以选择['album', 'camera'],即来源于相册或者拍照。

javascript 复制代码
  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)
    })
  }

更多微信小程序内容欢迎关注、评论、私信博主。

相关推荐
说私域1 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero8 小时前
微信小程序71~80
微信小程序·小程序
dssxyz9 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !10 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_13 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子17 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记18 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812119 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero21 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠1 天前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro