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

实现效果:

上传前显示:

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

源代码: 

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/323498.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

商城小程序(8.购物车页面)

目录 一、商品列表区域1、渲染购物车商品列表的标题区域2、渲染商品列表区域的基本结构3、为my-goods组件封装radio勾选状态4、为my-goods组件封装radio-change事件5、修改购物车中商品的选择状态6、为my-goods组件封装NumberBox7、为my-goods封装num-change事件8、修改购物车商…

[zabbix] zabbix监控

一、温习zabbix自定义监控 二、zabbix 自动发现与自动注册 2.1 zabbix 自动发现 //zabbix 自动发现&#xff08;对于 agent2 是被动模式&#xff09; zabbix server 主动的去发现所有的客户端&#xff0c;然后将客户端的信息登记在服务端上。 缺点是如果定义的网段中的主机数…

Linux进程【2】进程地址空间(+页表详解哦)

fork 引言&#xff08;程序地址空间&#xff09;进程地址空间进程地址空间mm_struct 虚拟地址到物理地址的转化总结 引言&#xff08;程序地址空间&#xff09; 在之前的学习过程中&#xff0c;我们认识了内存与地址&#xff0c;并且了解了在程序地址空间中的基本分区&#xf…

C++ 之LeetCode刷题记录(十)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅&#xff0c;多学多练&#xff0c;尽力而为。 先易后难&#xff0c;先刷简单的。 66. 加一 给定一个由 整数 组成的 非空 数组所表示的非负整数…

Alist开源网盘搭建

官网&#xff1a;https://alist.nn.ci/zh/github下载地址&#xff1a;https://github.com/alist-org/alist/releases gitcode上也提供了源码:https://gitcode.com/mirrors/alist-org/alist/tags 源码安装使用自己研究,这里不讲解,较为复杂 我使⽤的版本:v3.29.1 我的下载地址:…

[ACM学习] 动态规划基础之一二三维dp

课内学习的动态规划 有记忆的迭代 优化解的结构&#xff1a;原始问题的一部分解是子问题的解 三要素&#xff1a;1.子问题 2.状态的定义 3.状态转移方程 定义 线性dp的一道例题 dp[i]表示以位置 i 结尾的方案总数&#xff0c;dp[4]2&#xff0c;因为&#xff1a;首先只放一…

大数据开发之Hive(查询、分区表和分桶表、函数)

第 6 章&#xff1a;查询 6.1 基本语法及执行顺序 1、查询语句语法 select_expr, select_expr, ... FROM table_reference [WHERE where_condition] [GROUP BY col_list] [ORDER BY col_list] [CLUSTER BY col_list| [DISTRIBUTE BY col_list] [SORT BY col_list]] [LIMIT n…

C#~Winform取消窗体最大化最小化按钮

目录 取消最大化-false取消最小化-false效果 取消最大化-false 取消最小化-false 效果

Umi3 创建,配置环境,路由传参(代码示例)

目录 创建项目 配置环境 创建脚手架 项目结构及其目录、 路由 配置路由 嵌套路由 编程式导航和声明式导航 声明式导航 编程式导航 约定式路由 路由传参 query传参&#xff08;问号&#xff09; 接收参数 params传参&#xff08;动态传参&#xff09; 接收参数 创…

Android Text View 去掉默认的padding的实现方法

先看下最终实现效果&#xff0c;满意您在往下看&#xff1a; TextView 绘制的时候自带一定的Padding值&#xff0c;要想实现去掉默认的padding值&#xff0c;xml文件可以设置一个属性值 &#xff1a; android:includeFontPadding"false" 然后运行起来就会发现&…

【总结】Dinky学习笔记

概述 Dinky 是一个开箱即用、易扩展&#xff0c;以 Apache Flink 为基础&#xff0c;连接 OLAP 和数据湖等众多框架的一站式实时计算平台&#xff0c;致力于流批一体和湖仓一体的探索与实践 官网&#xff1a;Dinky 核心特性 沉浸式&#xff1a;提供专业的 DataStudio 功能&a…

喜好儿AI周报Weekly(第9期)CES2024 AI产业大爆发 | Rabbit R1 | 3D-Fauna | OLED屏幕 | Genie | MagicVideoV2 | Magnific

各位观众朋友们大家好&#xff01;我是被老板派去出差逛CES2024 拉斯维加斯消费电子展差点迷路回不来的阿喜。一起去看看这一周有什么新鲜事吧。 本期导读&#xff1a; 逛逛CES 2024消费电子展Rabbit R1人工智能设备三星AI机器人BallieLG无线透明OLED屏幕Portalgraph VR空间投…

【Linux】初识Linux及几个基本指令

Hello everybody!算算时间我已经有一个多月没有更新啦&#xff01;因为本专业是纺织工程&#xff0c;所以一直在复习应付期末考试\(0^◇^0)/。那好&#xff0c;废话不多说。让我们进入今天的主题&#xff01; 关于Linux系统可能很多同学不是很熟悉&#xff0c;有的人可能听过&…

4、C语言:指针与数组

数组与指针 指针与地址指针与函数参数指针与数组地址算数运算字符指针与函数指针数组以及指向指针的指针多维数组命令行参数指向函数的指针复杂声明 指针是一种保存变量地址的变量。C语言中&#xff0c;指针的使用非常广泛&#xff0c;原因之一是&#xff0c;指针常常是表达某个…

紫光展锐T610安卓核心板_虎贲T610安卓核心板参数

紫光展锐T610核心板是一款结构紧凑的4G智能模块&#xff0c;尺寸为52.5nm*38.5nm*2.9nm&#xff0c;适用于对产品结构尺寸要求较高的场合。该核心板搭载Android 11操作系统&#xff0c;采用12nm制程工艺&#xff0c;配备八核1.8GHz的CPU&#xff0c;包括2 x A751.8GHz 6 x A55…

20240115在ubuntu20.04.6下查看显卡信息

20240115在ubuntu20.04.6下查看显卡信息 2024/1/15 17:33 百度&#xff1a;ubuntu查看显卡型号命令 https://linux.xiaosiseo.com/post/6037.html#id4 Ubuntu查看显卡信息命令 小四LINUX7个月前 (05-22)Ubuntu3230 小四LINUX&#xff0c;是小四运营旗下网站&#xff0c;专注LIN…

excel管理接口测试用例

闲话休扯&#xff0c;上需求&#xff1a;自动读取、执行excel里面的接口测试用例&#xff0c;测试完成后&#xff0c;返回错误结果并发送邮件通知。 分析&#xff1a; 1、设计excel表格 2、读取excel表格 3、拼接url&#xff0c;发送请求 4、汇总错误结果、发送邮件 开始实现…

短视频IP运营流程架构SOP模板PPT

【干货资料持续更新&#xff0c;以防走丢】 短视频IP运营流程架构SOP模板PPT 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 抖音运营资料合集&#xff08;完整资料包含以下内容&#xff09; 目录 抖音15秒短视频剧本创作公式 在抖音这个短视频平台上&#…

QT报错记录

Ubuntu22.04安装Qt之后启动Qt Creator报错&#xff1a; Fron 6.5.0, xcb-cursor0 or libxcb-cursor0 is needed to load the Qt xcb platforn plugin. Could not load. This application failed to start because no Qt platforn plugin could be initialized. Reinstalling t…

OpenCV-Python(41):背景减除

目标 学习并掌握OpenCV中的背景减除方法 背景说明 在很多基础应用中背景检出都是一个非常重要的步骤。例如&#xff1a;顾客统计&#xff0c;使用一个静态摄像头来记录进入和离开房间的人数&#xff0c;或者是交通摄像头&#xff0c;需要提取交通工具的信息等。在所有的这些例…