uniapp 拍照上传

1.预览图片

let data = {problemPhoto: 'http://test.png' 
}
previewImage(data) {if(!data.problemPhoto){uni.showToast({icon:"none",title:"暂无照片"})return}console.log(data.problemPhoto.split(";"))uni.previewImage({current:0,urls: data.problemPhoto?data.problemPhoto.split(";"):[],});},

2.拍照上传图片方式一

        使用uniapp 自带的api拍照

<template><view class="wra"><!-- <com-button-page :data='data'></com-button-page> --><view class="upload-img"><image src="../../../static/images/QR_code.png" @tap="onGetImgClick"></image></view><view class="imgList"><view class="imgbox" v-for="(item,index) in imageList" :key='index'><image :src="item" mode="aspectFit" @click="previewImage(imageList)"></image></view><view title="删除第一张" class="del" v-show="imageList.length>0" @click="onDeleteClick(0)"></view></view></view>
</template><script>import URL from "../../../static/js/interface.js"import util from "../../../static/js/utils.js"import params from "../../../static/js/params.js"// import comButtonPage from '@/components/comButtonPage'export default {data() {return {imageList: [],}},methods: {onGetImgClick() {const that = thisuni.chooseImage({count: 6, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项success: function(res) {const len = that.imageList.lengthif (len >= 6) {uni.showToast({title: '图片最多上传6张'})} else {for (let i = 0; i < 6 - len; i++) {if (res.tempFilePaths[i]) {that.imageList.push(res.tempFilePaths[i])console.log(that.imageList)}}}},// .bind(that)})},// 删除图片onDeleteClick(index) {this.imageList.splice(index, 1)},previewImage(data) {// 预览多张图片if(!data){uni.showToast({icon:"none",title:"暂无照片"})return}uni.previewImage({current:0,urls: data});},}}
</script><style scoped>.upload-img {height: 200upx;width: 200upx;}.upload-img image {width: 100%;height: 100%;}.imgList {display: flex;}.imgbox, .del {width: 200upx;height: 200upx;}.imgbox image {width: 100%;height: 100%;}.del {background: url(../../../static/images/checkTypeMap/tzc_t.png) no-repeat center;}
</style>

效果图：

2.拍照上传图片方式二

        使用uniapp + HTML5 API 中的camera对象拍照

onGetImgClick() {var camera=plus.camera.getCamera() // 获取camera对象var resolution=camera.supportedImageResolutions // 获取字符串数组，摄像头支持的摄像分辨率camera.captureImage((res)=>{console.log(res)this.imageList.push(res)}, (error)=>{console.log(error)}, {resolution:resolution[resolution.length-1],format:"jpg"})},

 效果图：