vant的组件van-uploader上传图片在vue做H5时候是没有问题的，就是说直接在浏览器上是可以的
但是一旦封装成客户端android和ios的时候直接就失效了
今天我把自己写的一个组件分享给大家
我这里用的封装框架是cordova，用cordova讲vue H5的项目封装成客户端app

1、组件内容

<template>
	<div class="uploader">
		<div class="info-imgs" v-for="(item, index) in uploader_img" @click="Preview(uploader_img,index)" >
		  <img style="width:100%;height:100%;max-width: 80px;" v-lazy="item" alt />
		  <img src="../../../assets/img/guanbi.png" class="close" @click.stop="handleCancel(index)">
		</div>
		<div class="uploader-item" @click="cameraTakePicture" v-if="uploader_img.length < 3">
		  <img class="camera-icon" src="../../../assets/img/xiangji.png"/>
		</div>
	</div>
</template>

<script>
import {ImagePreview} from 'vant'
import {
 	uploadBase64,
 } from "../../../utils/api";
export default {
	name:'UploadImg',
	data(){
		return {
			uploader_img: [],
			saveDbUrl:[],
		}
	},
  	methods: {
		handleCancel(index){
			this.uploader_img.splice(index,1)
			this.saveDbUrl.splice(index,1)
			this.$emit('getImgUrl',this.saveDbUrl)
		},
		async afterRead() {
			const json = await uploadBase64({
			    method: "POST",
			    query: {
			      base64_image_content: this.file,
			    },
			  });
			  if (json.code == "200") {
			    // file.url = json.data.imgShowUrl;
			    // file.saveUrl = json.data.saveDbUrl;
				this.uploader_img.push(json.data.imgShowUrl)
				this.saveDbUrl.push(json.data.saveDbUrl)
				this.$emit('getImgUrl',this.saveDbUrl)
			  } else {
			    Toast(json.msg);
			  }
		},		  
		cameraTakePicture () {
			navigator.camera.getPicture(this.onSuccess, this.onFail, {
			    quality: 50,
			    destinationType:Camera.DestinationType.DATA_URL,
			    encodingType: Camera.EncodingType.JPEG,
			    sourceType:0
			  });
				// this.uploader_img.push("http://8.129.2.240:81//Public/attached/2022/01/10553178237.jpeg")
				// this.$emit('getImgUrl',this.uploader_img)
			},//就上面这点就实现调用摄像头和照片库，（这里只是实现调用）
			onFail(message) {
			  //取消照相功能提示
			},
			onSuccess(imageURL) {
			//开始上传，这里用到了cordova-plugin-file-transfer 插件，
				this.file = "data:image/jpeg;base64," + imageURL;
				this.afterRead();
			},		  
  		Preview(uploader_img,index){
  			ImagePreview({
  			  images:uploader_img,
  			  closeable: true,
			  startPosition:index,
  			});
  		}
  	}	
 }
 </script>

<style scoped>
 .uploader{
	display: flex;
	padding: 20px;
 }
 .info-imgs{
	 width: 80px;
	 height: 80px;
	 padding: 5px;
 }
 .close{
 	height:20%;
 	width:20%;
 	position:relative;
 	float: right;
	top: -115%;
	right: -10%;
 }
 .uploader-item{
	 background-color: #F7F8FA;
	 width: 80px;
	 height: 80px;
	 text-align: center;
	 padding: 5px;
 }
 .camera-icon{
	 width: 35px;
	 height: 35px;
	 margin-top: 18px;
 }
</style>

代码中使用的素材图片这里贴出来给你们

../../../assets/img/guanbi.png

../../../assets/img/xiangji.png

效果预览：

2、逻辑思路

(1)、组件中利用cordova的camera插件的getPicture方法调起手机的相册和相机来上传图片获取图片的base64格式

cameraTakePicture () {
			navigator.camera.getPicture(this.onSuccess, this.onFail, {
			    quality: 50,
			    destinationType:Camera.DestinationType.DATA_URL,
			    encodingType: Camera.EncodingType.JPEG,
			    sourceType:0
			  });
				// this.uploader_img.push("http://8.129.2.240:81//Public/attached/2022/01/10553178237.jpeg")
				// this.$emit('getImgUrl',this.uploader_img)
			},//就上面这点就实现调用摄像头和照片库，（这里只是实现调用）
		onFail(message) {
		  //取消照相功能提示
		},
		onSuccess(imageURL) {
		//开始上传，这里用到了cordova-plugin-file-transfer 插件，
			this.file = "data:image/jpeg;base64," + imageURL;
			this.afterRead();
		},

(2)、将得到的base64格式的文件上传至服务器保存即为上传成功！返回图片的访问链接用于回显和预览

async afterRead() {
			const json = await uploadBase64({
			    method: "POST",
			    query: {
			      base64_image_content: this.file,
			    },
			  });
			  if (json.code == "200") {
			    // file.url = json.data.imgShowUrl;
			    // file.saveUrl = json.data.saveDbUrl;
				this.uploader_img.push(json.data.imgShowUrl)
				this.saveDbUrl.push(json.data.saveDbUrl)
				this.$emit('getImgUrl',this.saveDbUrl)
			  } else {
			    Toast(json.msg);
			  }
		},

(3)、在需要的页面引入组件

<upload-img @getImgUrl="getImgUrl"></upload-img>

@getImgUrl="getImgUrl"
该方法是为了将组件中服务器返回的图片访问链接传给父级页面，方便图片的回显在父页面
getImgUrl(data){
	console.log(data);
	this.fileList = data;
},