封装的H5 app无法使用van-uploader组件上传图片

本文介绍了一个基于Cordova的Vue组件,实现了移动端相机拍照及从相册选取图片的功能,并通过Base64格式上传至服务器。组件使用了navigator.camera API进行图片选择,再通过自定义方法上传图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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/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;
},
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值