van-uploader上传图片报错Invalid handler for event “load“(在uniapp编译)

van-uploader使用报错

原因:主要原因这里使用的vant版本是2.13.0的,在Hbuild里面运行的项目,vant插件在这里会有部分组件有兼容问题,(van-image,van-uploader等)。

解决:主要是要实现图片上传功能,可以使用uniapp自带的上传组件(uni.uploadFile

官网地址

示例:

<template><scroll-view style="flex: 1"><view><view class="uni-padding-wrap uni-common-mt"><view class="demo"><imagev-if="imageSrc":src="imageSrc"class="image"mode="widthFix"></image><text v-else class="uni-hello-addfile" @click="chooseImage">+ 选择图片</text></view></view></view></scroll-view>
</template>
<script>
export default {data() {return {imageSrc: '',task: null,}},methods: {chooseImage: function () {uni.chooseImage({count: 1,success: (res) => {console.log('chooseImage success, temp path is', res.tempFilePaths[0])var imageSrc = res.tempFilePaths[0]uni.showLoading({title: '上传中'})this.task = uni.uploadFile({url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例,非真实的接口地址filePath: imageSrc,name: 'file',formData: {'user': 'test'},//header: {// "Content-Type": "multipart/form-data",//Authorization: `${uni.getStorageSync('tokens')}`, // 请求携带token//},success: (res) => {console.log('uploadImage success, res is:', res)uni.hideLoading();uni.showToast({title: '上传成功',icon: 'success',duration: 1000})this.imageSrc = imageSrc},fail: (err) => {console.log('uploadImage fail', err);uni.hideLoading();uni.showModal({content: err.errMsg,showCancel: false});},});},fail: (err) => {console.log('chooseImage fail', err)}})},}
}
</script><style>
.image {width: 100%;
}.demo {background: #fff;padding: 50rpx;justify-content: center;align-items: center;
}.uni-hello-addfile {text-align: center;background: #fff;padding: 50rpx;margin-top: 10px;font-size: 38rpx;color: #808080;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设置Ubuntu 20.04的静态IP地址(wifi模式下)

一、引言 自己家用的Ubuntu的&#xff0c;重启后ip地址经常会改变&#xff0c;这个时候就需要我们手动配置静态IP了。 二、优点 给Ubuntu设置一个静态IP地址有以下几个好处&#xff1a; 持久性&#xff1a;静态IP地址是固定不变的&#xff0c;与设备的MAC地址绑定。这意味着…

【广州华锐视点】VR飞行员驾驶模拟实训系统

VR飞行员驾驶模拟实训系统是一种基于虚拟现实技术的航空装备仿真测试技术&#xff0c;可以用于飞行员、乘务员和机务人员的训练。该系统可以模拟真实的飞行环境&#xff0c;包括天气、地形、飞机性能等&#xff0c;使被试者能够在虚拟环境中进行飞行操作&#xff0c;从而提高其…

使用证书的方式登录linux 系统或者windows系统

前提 服务端需要先生成自己的一对密钥 ssh-keygen -t rsa -b 4096Windows 1、客户端生成密钥 ssh-keygen -m PEM -t rsa -b 4096 -f C:\Users\SERVER\.ssh\win10_rsa -C win102、服务器端添加刚生成的公钥&#xff0c;将客户端 win10_rsa.pub 中内容追加到文件末尾 vim /…

SSH安全登录远程主机

SSH服务器简介 SSH即Security SHell的意思&#xff0c;它可以将连线的封包进行加密技术&#xff0c;之后进行传输&#xff0c;因此相当的安全。 SSH是一种协议标准&#xff0c;其目的是实现安全远程登录以及其它安全网络服务。 SSH协定&#xff0c;在预设的状态下&#xff0c;…

11月14号|Move生态Meetup相约浪漫土耳其

Move是基于Rust编程语言&#xff0c;由Mysten Labs联合创始人兼CTO Sam Blackshear在Meta的Libra项目中开发而来&#xff0c;旨在为开发者提供比现有区块链语言更通用的开发语言。Sam的目标是创建Web3的JavaScript&#xff0c;即一种跨平台语言&#xff0c;使开发人员能够在多个…

C++设计模式_17_Mediator 中介者

Mediator 中介者也是属于“接口隔离”模式。 文章目录 1. 动机 (Motivation)2. 模式定义3. 结构(Structure)4. 要点总结5. 其他参考 1. 动机 (Motivation) 在软件构建过程中&#xff0c;经常会出现多个对象互相关联交互的情况&#xff0c;对象之间常常会维持一种复杂的引用关系…

HCIA数据通信——基础设备配置

想了想&#xff0c;为了方便回顾复习&#xff0c;将理论和实践结合起来才是正确的&#xff0c;不然一边理论&#xff0c;又单独做实验这样不方便。 因此之前的文章都删了&#xff0c;还是以华为从头开始吧&#xff01;实验与理论应用结合起来做。 一&#xff0c;查看设备信息 …

windows结束进程并定时重启应用bat脚本

一、关闭进程并启动应用bat脚本 start.bat echo off rem 关闭指定进程 taskkill /f /im test.exeset "logFileWindows\test\Saved\Logs\*.log" rem 如果存在日志文件则删除日志文件 if exist "%logFile%" (del "%logFile%"echo delete success )…

解密Kubernetes:探索开源容器编排工具的内核

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【人脸检测 FPS 1000+】ubuntu下libfacedetection tensorrt部署

TensorRT系列之 Windows10下yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov7 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov6 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov5 tensorrt模型加速…

《SpringBoot项目实战》第一篇—接口参数的一些弯弯绕绕

系列文章导航 第一篇—接口参数的一些弯弯绕绕 第二篇—接口用户上下文的设计与实现 第三篇—留下用户调用接口的痕迹 第四篇—接口的权限控制 第五篇—接口发生异常如何统一处理 本文参考项目源码地址&#xff1a;summo-springboot-interface-demo 前言 大家好&#xff01;…

Notepad++安装插件和配置快捷键

Notepad是一款轻量级、开源的文件编辑工具&#xff0c;可以编辑、浏览文本文件、二进制文件、.cpp、.java、*.cs等文件。Notepad每隔1个月&#xff0c;就有一个新版本&#xff0c;其官网是&#xff1a; https://github.com/notepad-plus-plus/notepad-plus-plus。这里介绍其插件…

Harmony 个人中心(页面交互、跳转、导航、容器组件)

个人中心 前言正文一、创建工程二、登录① 更换启动页面② 拓展修饰符③ 页面跳转④ 等待进度条 三、导航栏四、首页① 轮播图② 网格列表 五、我的① 带参数跳转 六、源码 前言 今天是1024&#xff0c;祝各位程序员们&#xff0c;钱多事少离家近&#xff0c;不秃也强bug黄。在…

mac系统u盘启动盘制作教程,更新至macOS Sonoma 14

mac系统怎么制作装系统的u盘,如果您要在多台电脑上安装 macOS&#xff0c;而又不想每次都下载安装器&#xff0c;这时可引导安装器就会很有用。一起来看苹果电脑u盘启动盘制作教程吧。 Macos系统安装包合集包揽macos 10.15&#xff0c;macos 11和苹果最新系统等多个版本 1、A…

扩展运算符

扩展运算符&#xff08;Spread Operator&#xff09;是ES6中新增的运算符&#xff0c;使用“...”语法&#xff0c;可以将一个数组或对象进行展开操作&#xff0c;可以将它们拆分成独立的元素。它可以用于数组、对象、函数参数等多种情形。 例如&#xff0c;使用扩展运算符可以…

H5游戏分享-全民找房祖名qmxzfzm

H5游戏分享-全民找房祖名qmxzfzm 一开始就比较简单 后面就会越来越难&#xff0c;而且也有时间限制 游戏的源码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,ini…

嵌入式实时操作系统的设计与开发(消息)

消息 从概念上讲&#xff0c;消息机制和邮箱机制很类似&#xff0c;区别在于邮箱一般只能容纳一条消息&#xff0c;而消息则会包含一系列的消息。 系统定义了一个全局变量g_msgctr_header&#xff0c;通过它可以查找到任一已创建的消息容器。 每一个消息容器都可以根据其参数…

C++之左值、右值、std::forward、std::move总结(二百五十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Android Studio 导出 jar

AS版本&#xff1a;Android Studio Giraffe | 2022.3.1 Patch 1 1、File——New Module——Android Library 2、mylibrary——main——新建功能类 3、mylibrary——build.gradle——android {}内复制以下代码——Sync Now //Copy类型 tasks.register(makeJar, Copy) { //删…

SpringBoot整合Websocket实现聊天室

1.添加依赖&#xff1a;在pom.xml文件中添加WebSocket相关依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2.创建WebSocket配置类&#xff1a;…