网站和做空间chrome手机版

一、需求前提

特殊场景中，需要拍照的同时打开闪光灯，（例如黑暗场景下的设备维护巡检功能）。

起初我是用的uviewui中的u-upload组件自带的拍照功能，但是这个不支持拍照时打开闪光灯，也不支持从通知栏中打开闪光灯。

二、解决方案

采用组合形式解决：

1. 使用uniapp官方内置组件中的 媒体组件：camera 实现闪光灯拍照，uni.createCameraContext()获取返回图片结果
2. 结合uniapp官方内置组件中的 视图容器：cover-view 做定制化布局

1. 媒体组件：camera

camera 是页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
其中flash属性可以动态实现拍照闪光灯的功能，值为auto, on, off, torch

拍照动作可以使用uni.createCameraContext()获取拍照的图片结果，再做后续操作。

注意：

• camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view 、cover-image 覆盖在上面。
• 同一页面只能插入一个 camera 组件。(多次打开自定义的拍照界面可以使用v-if做销毁)

2. 视图容器：cover-view

cover-view是覆盖在原生组件上的文本视图。
app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。

注意：

• 容器内的每一个元素最好都用cover-view标签包裹（包括文字内容），否则会出现渲染异常问题。

三、 示例

<!--* @Description: 自定义文件上传组件，支持拍照、闪光灯、本地图片选择* @Doc: 双向绑定使用 <customUpload :modelValue.sync="test"></customUpload>* @Author: y* @Date: 2024-03-07 09:51:25
-->
<template><view class="custom-upload"><!-- 预览图片 --><template v-if="previewImage"><view class="file-item" v-for="(item,index) in fileList" :key="index" :style="[{width,height}]"><view v-if="item.status ==='uploading'" class="file-uploading"><u-loading-icon color="#19be6b"></u-loading-icon></view><u--image v-else :showLoading="true" :src="item.thumb || item.url" :width="width" :height="height"@tap="onPreviewImage(item)"><template v-slot:loading><!-- 此处后期需要优化为本地文件地址，避免走两次加载 --><u-loading-icon text="加载中" textSize="18"></u-loading-icon></template></u--image><!-- 删除按钮角标 --><view class="upload-deletable" @tap.stop="deleteItem(index)"><view class="upload-deletable-icon"><u-icon name="close" color="#ffffff" size="10"></u-icon></view></view><!-- 文件状态角标 --><view class="upload-success" v-if="item.status === 'success'"><view class="upload-success-icon"><u-icon name="checkmark" color="#ffffff" size="12"></u-icon></view></view></view></template><!-- 如果图片数量在设定范围内 --><template v-if="isInCount"><view class="upload-button" @tap="chooseOperationType" :style="[{width,height}]"><u-icon name="plus" size="26" color="#2979ff"></u-icon><text v-if="uploadText" class="upload-button-text">{{ uploadText }}</text><text v-else class="upload-button-text">上传</text></view></template><!-- 选项弹出层 --><u-popup :show="showOptionsPopup" :round="10" mode="bottom" :closeable="true" @close="this.showOptionsPopup=false"><view class="option-list"><view v-if="showTakePhoto" class="option-btn" @tap="onTakePhoto">拍照</view><view v-if="showChoosePhoto" class="option-btn" @tap="onChoosePhoto">从相册选择</view><view class="option-btn-close" @tap="this.showOptionsPopup=false">取消</view></view></u-popup><!-- 相机弹出层 --><u-overlay v-if="showCameraPopup" :show="showCameraPopup" mask-click-able="false"><!-- 添加v-if避免缓存相机，每次打开都需要重新创建 --><view class="camera-container"><camera device-position="back" :flash="flashStatus" style="width: 100%; height: calc(100% - 200rpx);"><cover-view class="user-location"><!-- 此处只可以使用cover-image插入图片（待开发） --><cover-view v-if="!userLocationRefreshing" class="icon-location"></cover-view><cover-view v-else class="icon-location-refreshing"></cover-view><cover-view v-if="userLocationRefreshing" style="color: #ff9900;">加载中...</cover-view><cover-view>{{userLocation||'---'}}</cover-view></cover-view></camera><view class="camera-option-list"><view class="option-btn" @tap.stop="$u.throttle(refreshLocation, 1000)">刷新定位</view><view class="option-btn" @tap.stop="takePhoto">拍照</view><view class="option-btn" @tap.stop="openFlash">{{flashStatus==='auto'?'闪光灯长亮':'闪光灯自动'}}</view></view></view></u-overlay></view>
</template><script>import { mapState, mapActions } from 'vuex';import { apiUrl } from '@/utils/env.js'; // 全局项目地址export default {name: "customUpload",props: {// 对外：上传的文件列表 {status:success|uploading|fail, url:''}modelValue: {type: Array,default: () => []},showTakePhoto: {type: Boolean,default: true},showChoosePhoto: {type: Boolean,default: true},// 上传组件的宽度width: {type: String,default: '180rpx'},// 上传组件的高度height: {type: String,default: '180rpx'},// 上传图标的文字uploadText: {type: String,default: ''},// 上传文件的存储位置fileStorageLocation: {type: String,default: 'yhtest'},},data() {return {fileList: [], // 对内：上传的文件列表 {status:success|uploading|fail, url:''}isFileError: false, // 文件列表出现故障（待开发）previewImage: false, // 预览图片isInCount: true, // 是在限制的文件数量范围内showOptionsPopup: false, // 选项弹出层showCameraPopup: false, // 相机弹出层flashStatus: 'auto', // 闪光灯，值为auto, on, off, torchuserLocationRefreshing: false, // 用户位置刷新中userLocation: '', // 用户位置};},watch: {// 监听文件列表数据长度变化，存在数据则显示预览fileList(newData, oldData) {this.$emit('update:modelValue', newData);this.previewImage = newData.length ? true : false;},modelValue: {handler: function(newData, oldData) {this.fileList = newData;},immediate: true,deep: true}},computed: {...mapState(['userInfo']),},async created() {this.flashStatus = 'auto';},methods: {// 引入vuex中方法...mapActions(['getUserLocation']),// 选择操作类型chooseOperationType() {this.showOptionsPopup = true;this.refreshLocation(); // 获取定位},// 拍照onTakePhoto() {this.flashStatus = 'auto';this.showOptionsPopup = false;this.showCameraPopup = true;},//从文件夹选择onChoosePhoto() {this.showOptionsPopup = false;uni.chooseMedia({count: 9,mediaType: ['image', 'video'], // 文件类型sourceType: ['album'], // 指定从相册获取maxDuration: 30,success: async (res) => {// 按顺序执行异步操作，异步迭代for (let item of res.tempFiles) {const tempUrl = item.tempFilePath;console.log('拍照的临时图片地址：', tempUrl);this.fileList.push({status: 'uploading', // 状态为上传中url: tempUrl, // 文件的临时地址thumb: tempUrl, // 文件的临时地址});const realUrl = await this.uploadFilePromise(item.tempFilePath); // 上传图片console.log('上传返回的真实图片地址：', realUrl);this.fileList.pop();this.fileList.push({status: 'success', // 状态为上传中url: realUrl, // 文件的真实地址thumb: tempUrl, // 文件的临时地址});}},fail: (err) => {console.log('文件夹选择报错：', err);},})},// 手动拍照async takePhoto() {console.log('拍照按钮点击---------', new Date());// 创建并返回 camera 组件的上下文 cameraContext 对象const ctx = uni.createCameraContext();setTimeout(() => {this.showCameraPopup = false; // 关闭弹出层}, 200);await ctx.takePhoto({quality: 'high',success: async (res) => {uni.$u.toast('拍摄成功');// 返回照片文件的临时路径const tempUrl = res.tempImagePath;console.log('拍照的临时图片地址：', tempUrl);this.fileList.push({status: 'uploading', // 状态为上传中url: tempUrl, // 文件的临时地址thumb: tempUrl, // 文件的临时地址});const realUrl = await this.uploadFilePromise(res.tempImagePath); // 上传图片console.log('上传返回的真实图片地址：', realUrl);this.fileList.pop();this.fileList.push({status: 'success', // 状态为上传中url: realUrl, // 文件的真实地址thumb: tempUrl, // 文件的临时地址});},fail: (err) => {console.log('手动拍照报错：', err);},});},// 打开闪光灯openFlash() {if (this.flashStatus === 'auto') {this.flashStatus = 'torch'; // 闪光灯长亮} else {this.flashStatus = 'auto'; // 闪光灯长亮}},// 刷新定位async refreshLocation() {this.userLocationRefreshing = true;this.userLocation = await this.getUserLocation(); // 获取用户位置信息setTimeout(() => {this.userLocationRefreshing = false;}, 1000)},// 上传图片async uploadFilePromise(filePath) {return new Promise((resolve, reject) => {let token = "Bearer ";token += uni.getStorageSync('token');let a = uni.uploadFile({url: `${apiUrl}/wx/wxfile/upload`, // 接口地址filePath: filePath,name: 'multipartFile', // 此处默认值是file,实际需要根据后端接口做更改header: {'Content-Type': 'multipart/form-data','Authorization': token},// HTTP 请求中其他额外的 form dataformData: {"cameraMan": this.userInfo.nickName || '---', // 拍摄人"cameraSite": this.userLocation || '---', // 拍摄位置"customPath": this.fileStorageLocation, // 自定义文件存放路径},success: (res) => {let parseData = JSON.parse(res.data);console.log("上传成功的地址", parseData);resolve(parseData.data);}});})},// 按下标删除图片deleteItem(index) {this.fileList.splice(index, 1);},// 预览图片onPreviewImage(item) {if (item.status !== 'success') return;uni.previewImage({// 先filter找出为图片的item，再返回filter结果中的图片urlurls: this.fileList.filter((item) => item.status === 'success' && item.url).map((item) => item.url || item.thumb),current: item.url || item.thumb,fail() {uni.$u.toast('预览图片失败')},});},}}
</script><style lang="scss">.custom-upload {// border: 1px dashed red;display: flex;flex-direction: row;flex-wrap: wrap;.file-item {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;border-radius: 2px;margin: 0 8px 8px 0;box-sizing: border-box;.upload-deletable {position: absolute;top: 0;right: 0;background-color: #373737;height: 14px;width: 14px;display: flex;flex-direction: row;border-bottom-left-radius: 100px;align-items: center;justify-content: center;z-index: 3;.upload-deletable-icon {position: absolute;-webkit-transform: scale(0.7);transform: scale(0.7);top: 0px;right: 0px;}}.upload-success {position: absolute;bottom: 0;right: 0;display: flex;flex-direction: row;border-style: solid;border-top-color: transparent;border-left-color: transparent;border-bottom-color: #5ac725;border-right-color: #5ac725;border-width: 9px;align-items: center;justify-content: center;.upload-success-icon {position: absolute;-webkit-transform: scale(0.7);transform: scale(0.7);bottom: -10px;right: -10px;}}}.upload-button {padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #f4f5f7;border-radius: 2px;margin: 0 8px 8px 0;box-sizing: border-box;.upload-button-text {margin-top: 8rpx;color: #ccc;text-align: center;}}.option-list {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 40rpx 40rpx 20rpx 40rpx;.option-btn {border-bottom: 1px solid #ccc6;padding: 30rpx;width: 100%;text-align: center;font-size: 16px;}.option-btn-close {padding: 30rpx;width: 100%;text-align: center;font-size: 16px;}}.camera-container {position: relative;width: 100%;height: 100%;.user-location {position: absolute;bottom: 20rpx;left: 20rpx;padding: 20rpx;background-color: #cccccc9c;color: #fff;border-radius: 10rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;.icon-location {width: 30rpx;height: 30rpx;border-radius: 50%;background-color: #19be6b;margin: 6rpx;border: 2px solid #ecddd5;}.icon-location-refreshing {width: 30rpx;height: 30rpx;border-radius: 50%;background-color: #ff9900;margin: 6rpx;border: 2px solid #ecddd5;}}.camera-option-list {width: 100%;height: 200rpx;background-color: #f4f5f7;display: flex;flex-direction: row;.option-btn {display: flex;flex-direction: column;justify-content: center;border: 2px solid #2979ff;box-sizing: border-box;height: 100%;width: 33.33%;text-align: center;font-size: 18px;}}}}
</style>