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

实现效果：

上传前显示：

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

源代码： 

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

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