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

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

实现效果：

上传前显示：

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

源代码：

.wxml

<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

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

.js

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

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

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

原文地址:https://blog.csdn.net/tl437002770/article/details/135604720

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_57412.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

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