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

实现效果:

上传前显示:

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

源代码:

.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)
    })
  }

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

相关推荐
qingyingWin24 分钟前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
shadouqi1 小时前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
韩召华1 小时前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++
前端Hardy3 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
2501_9159090610 小时前
iOS电池寿命与App能耗监测实战 构建完整性能监控系统
android·ios·小程序·https·uni-app·iphone·webview
一只开心鸭!11 小时前
原生微信小程序实现语音转文字搜索---同声传译
微信小程序·小程序
weixin_lynhgworld11 小时前
旧物回收小程序:科技赋能,让旧物回收焕发生机
科技·小程序
此心光明事上练15 小时前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
Byte_Me1 天前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
gongzemin1 天前
微信第三方平台的配置
微信·微信小程序·资讯