wx小程序选择图片、预览图片

文章目录

选择图片预览图片（全屏显示图片）案例——选择图片，然后预览

选择图片

参考 wx.chooseImage

uni.chooseImage({ // 可以选择图片的数量,最多可以选择9张图片 count: 1, // 可以选择压缩图片 或者 原始图片 sizeType: ['original', 'compressed'], // 选择图片的来源: 相册 或者 拍照 sourceType: ['album', 'camera'], success(res) { console.log(res) const tempFilePaths = res.tempFilePaths; result.originUrl = tempFilePaths[0]; //根据图片的路径，获得原始图片相关的信息 uni.getImageInfo({ src: res.tempFilePaths[0], success(res) { // 获得原始图片大小 var originWidth, originHeight; originHeight = res.height; originWidth = res.width; } }) } })

预览图片（全屏显示图片）

参考 wx.previewImage

uni.previewImage({ // current string urls 的第一张 否 当前显示图片的链接 current: current, // urls Array.< string > 是 需要预览的图片链接列表。2.2.3 起支持云文件ID。 urls: [current] })

案例——选择图片，然后预览

<template> <view class="avatar-image"> <!-- 如果上传了照片，显示照片 --> <image :src="uploadImageUrl" :data-src="uploadImageUrl" mode="widthFix" @tap="chooseVisitorImageAction" @longtap="previewImageAction" v-if="uploadImageUrl != ''"></image> <!-- 如果没有上传照片，显示默认图片 --> <image class="img" src="/static/images/camera_normal.png" mode="widthFix" @tap="chooseVisitorImageAction" v-if="uploadImageUrl == ''"></image> <view class="text-center tip"> {{tips}} </view> </view> </template> <script> export default { data: function() { return { tips: '上传人脸正面照', uploadImageUrl: '' } }, props: { imgUrl: { type: String, default: '' } }, mounted: function () { this.uploadImageUrl = this.imgUrl; }, methods: { // 预览图片 previewImageAction: function(eventObj) { const current = eventObj.target.dataset.src; debugger uni.previewImage({ // urls Array.< string > 是 需要预览的图片链接列表。2.2.3 起支持云文件ID。 // current string urls 的第一张 否 当前显示图片的链接 current: current, urls: [current] }) }, // 选择人脸照片 chooseVisitorImageAction: function() { const that = this; uni.chooseImage({ count: 1, sourceType: ['album', 'camera'], success: function(res) { // 向组件触发change事件 that.$emit("change", res.tempFilePaths[0]); that.uploadImageUrl = res.tempFilePaths[0]; } }) } }, watch: { imgUrl: function (newValue, oldValue) { debugger this.uploadImageUrl = newValue; } } } </script> <style lang="scss"> .avatar-image { width: 33%; max-width: 300px; margin: 0 auto; image { width: 100%; height: auto; } .tip { line-height: 50px; ; } } </style>