微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步。
先看下效果图
只写了一下效果样式的话希望大家不要太在意,下面马路杀手要开车了。
1.wxml排版和布局
这个排版非常简单就是一个按钮button加个图片image标签而已,这个相信有点基础的人都能理解,直接放代码:
<view class="container">
<view class="userinfo">
<button bindtap="upload"> 上传图片 </button>
</view>
<block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
<image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
</block>
</view>
2.重要的js
首先定义一个点击按钮上传图片的一个事件,这里会用到微信图片API中的wx.chooseImage
这个API会有6个参数分别是:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
count | Number | 否 | 最多可以选择的图片张数,默认9 |
sizeType | StringArray | 否 | original 原图,compressed 压缩图,默认二者都有 |
sourceType | StringArray | 否 | album 从相册选图,camera 使用相机,默认二者都有 |
success | Function | 是 | 成功则返回图片的本地文件路径列表 tempFilePaths |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
好了该介绍的都介绍了,下面来看下代码:
upload: function () {
let that = this;
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 1000
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
that.setData({
tempFilePaths: tempFilePaths
}) }
})
},
不要觉得这样就万事大吉了,现在仅仅是在前端显示,你还要上传到服务器,上传的话就会用到另一个API了wx.uploadFile
这个API会有8个参数
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 开发者服务器 url |
filePath | String | 是 | 要上传文件资源的路径 |
name | String | 是 | 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 |
header | Object | 否 | HTTP 请求 Header, header 中不能设置 Referer |
formData | Object | 否 | HTTP 请求中其他额外的 form data |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
下面来看下代码是什么样的:
upload: function () {
let that = this;
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 1000
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths; that.setData({
tempFilePaths: tempFilePaths
})
/**
* 上传完成后把文件上传到服务器
*/
var count = 0;
for (var i = 0, h = tempFilePaths.length; i < h; i++) {
//上传文件
/* wx.uploadFile({
url: HOST + '地址路径',
filePath: tempFilePaths[i],
name: 'uploadfile_ant',
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
count++;
//如果是最后一张,则隐藏等待中
if (count == tempFilePaths.length) {
wx.hideToast();
}
},
fail: function (res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
}
});*/
} }
})
},
有的人会有疑问为什么会定义一个count为0呢,就是因为需要判断是不是最后一张图片如果是就不需要显示加载中了。
好了,上传图片基本上说完了接着看预览图片,预览图片的话也要用到一个微信的API是wx.previewImage
这个API有五个参数
current | String | 否 | 当前显示图片的链接,不填则默认为 urls 的第一张 |
urls | StringArray | 是 | 需要预览的图片链接列表 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
定义预览图片方法,点击图片的时候执行:
listenerButtonPreviewImage: function (e) {
let index = e.target.dataset.index;//预览图片的编号
let that = this;
wx.previewImage({
current: that.data.tempFilePaths[index],//预览图片链接
urls: that.data.tempFilePaths,//图片预览list列表
success: function (res) {
//console.log(res);
},
fail: function () {
//console.log('fail')
}
})
},
详细代码看这里:https://github.com/ziqinComeOn/upload-pic.git
转载:https://www.cnblogs.com/Limengbo/p/8746370.html
微信小程序之上传图片和图片预览的更多相关文章
- (干货)微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序开发之真机预览
1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...
- 微信小程序批量上传图片 All In One
微信小程序批量上传图片 All In One open-data https://developers.weixin.qq.com/miniprogram/dev/component/open-dat ...
- 微信小程序-显示外链图片 bug
微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...
- 微信小程序开发之多图片上传+服务端接收
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
- 微信小程序/网站 上传图片到腾讯云COS
COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务.可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽,请求等.个人也可以通过腾讯云账号免费 ...
- 微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
随机推荐
- 【译】gRPC vs HTTP APIs
本文翻译自 ASP.NET Blog | gRPC vs HTTP APIs,作者 James,译者 Edison Zhou. 写在开头 现在,ASP.NET Core使开发人员可以构建gRPC服务. ...
- 初窥R(基本说明、获取帮助、工作空间、输入输出、包)
本篇简要介绍使用R的一些基本概念,包括基本说明.获取帮助.工作空间.输入输出,每个知识点中都会通过一个例子来练习. 一.R基本情况说明 1.R是一种区分大小写的解释性语言. 2.控制台默认使用命令提示 ...
- KnockoutJS-自定义属性绑定
在knockoutjs中,已有的绑定功能已经十分强大,基本上可以不需要再去考虑扩展了,但是,也有例外的场景,面对这种场景,还是得去完成,knockoutJS提供了自定义绑定来扩展绑定功能. 一.新建绑 ...
- axios解决跨域问题(vue-cli3.0)
一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都 ...
- SAP_ECC6_EHP7_IDES安装文档ORACLE11G+WINDOWS2012 R2 问题总结
SAP_ECC6_EHP7_IDES安装文档ORACLE11G+WINDOWS2012 R2 问题总结 1.注意密码不能带@等特殊符号,否则会报如下错误,因为ORACLE数据是不容许密码带@的.@是一 ...
- html5的 history模式和hash模式
直观区别 hash 带一个# history 没有# 各自特点 hash: 仅 hash 符号之前的内容会被包含在请求中,**因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误.* ...
- 利用 OpenCC 工具进行文字的简繁转换
前言 近日在公司遇到一个需求,因为准备要推出海外版产品,所以需要将所有的简体文字转换为繁体文字.一开始是改了表面的文字,但是后面发现很多提示语也需要去改,所以找了一个工具去对所有 .m 文件进行批量文 ...
- 打通 DevOps 任督二脉 ,CODING 2.0 制品库全新上线
CODING 在近期的 KubeCon 2019 大会上发布了 CODING 2.0,同时发布了最新功能--制品库.CODING 不断完善 DevOps 工具链,旨在持续提升研发组织软件交付的速度与质 ...
- Linux(Centos7)下redis5集群搭建和使用
1.简要说明 2018年十月 Redis 发布了稳定版本的 5.0 版本,推出了各种新特性,其中一点是放弃 Ruby的集群方式,改为 使用 C语言编写的 redis-cli的方式,是集群的构建方式复杂 ...
- MySQL语句使用。
目录 MySQL的DDL.DML.DQL语句和单表增.删.改.查 实验准备: 实验开始: DDL语句 DML语句 DQL语句 单表操作的分组统计 MySQL的DDL.DML.DQL语句和单表增.删.改 ...