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

实现效果:

上传前显示:

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

源代码: 

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在vue中,切换页面之后如何关闭定时器

在vue中&#xff0c;使用了element-ui的框架&#xff0c;点击左侧切换内部页面。 有些页面使用了定时器&#xff0c;在其换到其他页面的时候&#xff0c;希望能够关闭这些定期请求和复杂操作。 那么&#xff0c;切换页面之后如何关闭定时器&#xff1f;vue的创建流程中没找到能…

OWASP漏洞原理启航(第一课)

OWASP Top 10 2021 介紹 漏洞原理启航介绍 OWASP 定义&#xff1a; AI介绍 OWASP (开放Web应用程序和安全项目) 是一个全球性的社区&#xff0c;致力于提供关于Web应用程序安全性的信息、教育和支持。OWASP是一个非盈利组织&#xff0c;由志愿者驱动&#xff0c;旨在提高Web应…

从“精益思想“看机器人的开发与应用:一场科技与效率的完美融合

在科技飞速发展的今天&#xff0c;机器人已经深入到我们的生活和工作之中&#xff0c;成为了提高效率、提升质量的重要工具。然而&#xff0c;如何让机器人的开发和利用更有效率、更精细&#xff0c;这是摆在我们面前的一道难题。此时&#xff0c;"精益思想"的出现&a…

记ubuntu2004通过NetworkManager修改网络的优先级

这里写自定义目录标题 前言步骤 前言 起因在于万恶的校园网&#xff0c;突然台式有线死活没法认证&#xff08;感觉是IP冲突了&#xff1f;另外一台电脑同样的系统就没有问题&#xff0c;连路由器WIFI也是可以的&#xff0c;路由器设置的是桥接模式&#xff0c;有没有大佬提供…

不分青红皂白,美杜莎勒索软件攻击慈善饮用水机构Water for People

据The Record网站消息&#xff0c;1月11日&#xff0c;勒索软件组织美杜莎&#xff08;Medusa&#xff09;在其暗网受害名单网站上列出了 Water for People——一家专为贫困地区提供清洁饮用水的非盈利组织。 美杜莎向该组织索要30万美元赎金&#xff0c;否则将公布被盗信息。W…

表单验证 ---- 在Vue2中使用ElementUI进行表单验证

目录 前言 给表单绑定对应属性 在data中定义数据对象和表单的定义规则 与数据对象双向绑定 对整个表单进行验证 前言 在做项目时&#xff0c;对于表单进行验证是我们必不可少的 例如 搭建一个基本的登录界面 <div class"form"><h1>登录</h1>&…

拼图小游戏(实现游戏主界面)(未连接数据库)

注释&#xff1a; 基于IDEA&#xff0c;创建窗体进行游戏 默认的用户名和密码为&#xff1a;zhangsan,123 lisi,1234 App界面 package marchwho.ui;public class App {public static void main(String[] args) {//登录的窗体new LogInJFrame();//注册的窗体// new Registe…

操作系统复习 九-十二 章

操作系统复习 九-十二 章 文章目录 操作系统复习 九-十二 章第九章 单处理器调度调度的概念调度的时机、切换与过程进程调度方式调度的基本准则进程的挂起态与七状态模型典型的调度算法 第十一章 I/O管理和磁盘调度I/O 设备I/O控制方式I/O子系统的层次结构IO子系统概述IO调度概…

【电子取证篇】蘇小沐的电子取证工具合集在线文档

【电子取证篇】蘇小沐的电子取证工具合集在线文档 弄成了在线表格&#xff0c;记得及时保存&#xff1b;工具永远只是辅助&#xff0c;但不要过多依赖自动化&#xff0c;有难度说明可以提升&#xff0c;既要不断学习也要不停思考&#xff0c;知行合一—【蘇小沐】 【腾讯文档…

Spring Boot中操作数据库的几种并发事务方式

当有多个并发事务时&#xff0c;会发生丢失更新异常。来自一个或多个事务的更新可能会丢失&#xff0c;因为其他事务会用其结果覆盖它。 让我们通过一个例子来检验一下。考虑以下执行事务的方法。 public void withdraw(Long accountId, double amount) { Account account a…

解决防爬虫机制方法(二)

最近为了完成学校的大数据的作业&#xff0c;老师要我们爬一个的网站&#xff0c;里面有还算不错的防爬机制&#xff0c;忙活了几天&#xff0c;总结出一些常见的防爬机制的应对方法&#xff0c;方法均来自个人实战总结&#xff0c;非专业爬虫角度分析 承接上一次讲的方法解决…

OpenAI 悄然更新使用政策

据 The Intercept 报道&#xff0c;OpenAI 近日悄然在其使用政策中删除了「明确禁止将其技术用于军事目的」的措辞。 截至 1 月 10 日&#xff0c;OpenAI 的「使用政策」页面还包括禁止「具有高人身伤害风险的活动」&#xff0c;特别是应用于「武器开发」和「军事和战争」。 而…

MedSegDiff: Medical Image Segmentation with Diffusion Probabilistic Model

摘要 Diffusion probabilistic model (DPM) recently becomes one of the hottest topic in computer vision. Its image generation application such as Imagen, Latent Diffusion Models and Stable Diffusion have shown impressive generation capabilities, which arouse…

Binder 机制 javanative

一&#xff1a;Binder介绍 Binder是一套ipc通信方案 Binder框架定义了四个角色&#xff1a; Server &#xff0c;Client&#xff0c;ServiceManager &#xff08;以后简称SMgr&#xff09;以及Binder驱动。其中Server &#xff0c;Client&#xff0c;SMgr运行于用户空间&#…

你知道什么是Java中的类型强转吗?

强制类型转换 强转存在与父转子的时候&#xff0c;子转父不需要进行强转&#xff0c;如 Object o "hello"; //String类是Object类的子类&#xff0c;无需进行强转类型强转分为两种情况&#xff1a; Ⅰ、向下转型&#xff1a;将父类对象引用转换为子类对象引用&am…

随心玩玩(十三)Stable Diffusion初窥门径

写在前面&#xff1a;时代在进步&#xff0c;技术在进步&#xff0c;赶紧跑来玩玩 文章目录 简介配置要求安装部署下载模型启动ui插件安装教程分区提示词插件Adetailer插件提示词的分步采样采样器选择采样器的收敛性UniPC采样器 高分辨率修复 (Hires. fix)图生图ControlNet介绍…

jetson nano VNC远程桌面配置及使用(nomachine)

文章目录 jetson nano VNC远程桌面配置及使用1.Nomachine介绍2.在电脑端安装Nomachine3.在Jetson Nano端安装Nomachine4.电脑端连接及使用步骤5.修改分辨率6.NoMachine常见问题6.1 黑屏6.2 白屏 jetson nano VNC远程桌面配置及使用 本节适用于Jetson Nano没有单独显示器可以给…

正则验证封装

正则表达式常用符号说明: .是除换行以外的所有任意符号 \s空白符号 \S除空白符号以外的任意符号 \w字母、数字、下划线 \W 除字母、数字、下划线以外的其他任意符号 \d 数字(0----9) \D 除数字以外的任意其他符号 ^ 字符串开始 $ 字符串结束 * 匹配0到无数次(匹配的是符号前边的…

2023年跨国企业如何实现跨境数据传输合规化(上)

一、什么是数据跨境传输&#xff1f; 首先了解一个概念&#xff0c;什么是数据跨境传输&#xff1f; 数据跨境传输简单概括就是指信息通过互联网等网络媒介&#xff0c;在跨国企业之间进行传递和交换的过程。 有一则官方网站关于全球化数字化的数据统计&#xff1a;仅2019 年…

MyBatisPlus学习笔记二

接上&#xff1a;MyBatisPlus学习笔记一&#xff1a; MyBatisPlus学习笔记一-CSDN博客 1、条件构造器 MyBatisPlus支持各种复杂的where条件&#xff0c;可以满足日常开发的所有需求。 1.1、集成体系 1.2、实例 查询 lambda查询 更新 1.3、总结 2、自定义sql 我们可以利用MyB…