当前位置: 首页 > article >正文

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">
         <image
           v-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.kler.cn/a/105442.html

相关文章:

  • 矿用电机车直接转矩控制技术研究
  • 动态组件<component>
  • 【概率论教程01】对贝叶斯定理的追忆
  • mongodb数据迁移的方法
  • Linux ———— 用户-组
  • 0基础学习PyFlink——用户自定义函数之UDAF
  • Android开发基础:SharedPreferences的使用
  • HarmonyOS鸿蒙原生应用开发设计- 流转图标
  • menuconfig 图形化配置原理说明三
  • 【经验分享】openGauss容灾集群搭建
  • android开发使用OkHttp自带的WebSocket实现IM功能
  • 了解神经网络
  • python:使用Flask-SQLAlchemy对数据库增删改查的简单示例
  • YouTrack 中如何设置邮件通知
  • 非小米笔记本小米妙享中心安装最新教程 3.2.0.464 兼容所有Windows系统
  • 13.4web自动化测试(Selenium3+Java)
  • [SpringCloud] Eureka 与 Ribbon 简介
  • linux deepin系统 php多版本
  • 1125:矩阵乘法《详解》
  • CCF CCSP2023参赛记 + 算法题题解