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

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;
},

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

elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 最近在使用 vue2.0开 ...
网站转APP软件封装网页转APP打包H5封装分发平台APP封装生成双端
APP封装什么是 APP 封装? 什么是APP打包其实APP打包.APP封装.在线打包都是一个意思,就是把网站封装成APP 1.APP 封装是指把网页形式的网站通过技术封装成为可以下载到手机上 ...
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
APICloud 原生模块、H5模块、多端组件使用教程
使用APICloud平台,可以使用前端技术快速开发iOS.Android App.小程序.Web等多端应用.在开发过程中,调用模块可以极大的提升开发效率.本文分为三个部分,告诉大家如何使用APIClo ...
2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码分享
2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序霸王餐小程序源码地址成品演 ...
thinkphp后台管理系统+vue前端H5 app
thinkphp后台管理系统+vue前端H5 app 众包接单型App 全部源码已发布,欢迎star, 移步码云前言 1.帮朋友做的一个接单类型的后台管理系统(朋友的需求是淘宝好评刷管理) 2.目前 ...
H5 App开发工具 WeX5
WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能"一秒打开"!对跨平台多前端应用开发的支持极好,一次开发,多平台运行 . WeX5采用混合应用( ...
不要签名证书将网页打包封装成苹果APP，无需苹果企业签名，IPA证书签名，ios签名证书，免越狱安装...
不用签名证书将网页封装成苹果APP,无需苹果企业证书签名,IPA证书签名,ios证书签名,免越狱安装 (本方法只支持网站封装app,原生的用不了,详细请咨询客服) 近期很多朋友问我把网站变成app的 ...
运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团
运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团前后端全套源码, 支持二次开发,代码无加密! 独立商家后台用于店铺商品管理订单管理发货管理等多类经营模式多商 ...

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

1、组件内容

2、逻辑思路

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

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

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

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

最新文章

热门文章