这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步。

先看下效果图

只写了一下效果样式的话希望大家不要太在意,下面马路杀手要开车了。

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. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  2. 微信小程序开发之真机预览

    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...

  3. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  4. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  5. 微信小程序批量上传图片 All In One

    微信小程序批量上传图片 All In One open-data https://developers.weixin.qq.com/miniprogram/dev/component/open-dat ...

  6. 微信小程序-显示外链图片 bug

    微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...

  7. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

  8. 微信小程序/网站 上传图片到腾讯云COS

    COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务.可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽,请求等.个人也可以通过腾讯云账号免费 ...

  9. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

随机推荐

  1. Cocos Creator 资源加载流程剖析【五】——从编辑器到运行时

    我们在编辑器中看到的资源,在构建之后会进行一些转化,本章将揭开Creator对资源进行的处理. 资源处理的整体规则 首先我们将Creator的开发和运行划分为以下几个场景: 编辑器 当我们将资源放到编 ...

  2. bbbbbb

    Blazor 机制初探以及什么是前后端分离,还不赶紧上车? 标签: Blazor .Net 上一篇文章我发了一个 BlazAdmin 的尝鲜版,这一次主要聊聊 Blazor 是如何做到用 C# 来写前 ...

  3. Spring 核心技术与产品理念剖析【下】

    3. Spring Cloud 蝶变重生 Spring 框架的升级演进都是围绕分层架构进行的,从简单到复杂,再回到简单的过程.如果我们没有经历过 Spring 最开始繁琐的配置,然后一步步精简,就根本 ...

  4. Linux创建Jenkins启动脚本以及开机启动服务

    1.jenkins.sh #!/bin/bash ###主要目的用于开机启动服务,不然 启动jenkins.war包没有java -jar的权限 JAVA_HOME=/usr/lib/jdk1.8.0 ...

  5. digitalworld.local:Torment Vulnhub Walkthrough

    主机层面扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.135Starting Nmap 7.70 ( https://nmap.org ) at 2019-08-09 ...

  6. http模块

    1.引入http模块 const http = require('http') 2.创建node服务器 在创建node服务器的时候需要使用http模块中的http.creatServer()方法来进行 ...

  7. 原创【cocos2d-x】CCMenuItemToggle 在lua中的使用

    说明:1,所使用的cocos2dx版本为2.1.3 ;09:48:05 2,本人仍是在学习中的小菜鸟,此博客只是为了记录我学习过程中的点滴,同时也希望同样lua开发的童鞋,一起交流: 3,本人whj0 ...

  8. Go语言常见坑

    可变参数是空接口类型当参数的可变参数是空接口类型时,传人空接口的切片时需要注意参数展开的问题.func main() { var a = []interface{}{1, 2, 3} fmt.Prin ...

  9. 你可能会忽略的 Git 提交规范

    一.为什么需要规范? 无规矩不成方圆,编程也一样. 如果你有一个项目,从始至终都是自己写,那么你想怎么写都可以,没有人可以干预你.可是如果在团队协作中,大家都张扬个性,那么代码将会是一团糟,好好的项目 ...

  10. 什么是面向对象编程(OOP)?

    Java 程序员第一个要了解的基础概念就是:什么是面向对象编程(OOP)? 玩过 DOTA2 (一款推塔杀人的游戏)吗?里面有个齐天大圣的角色,欧洲战队玩的很溜,国内战队却不怎么会玩,自家人不会玩自家 ...