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>


van-uploader是一款基于Vue.js的上传组件,支持单个或批量上传的功能,并且可以限制上传的文件类型、大小等参数。 使用van-uploader可以快速实现文件上传功能,以下是上传图片的实例: 1.在Vue组件引用van-uploader组件 ``` <van-uploader action="//example.com/upload" :on-success="handleSuccess" /> ``` 其action属性指定上传文件的地址,on-success属性指定上传成功后的回调函数。 2.定义handleSuccess函数,用于处理上传成功后的操作 ``` methods: { handleSuccess(response) { console.log(response); } } ``` 上传成功后,服务器会返回一个响应对象response,我们可以在handleSuccess函数对返回的数据进行处理。 3.对上传组件进行配置,限制上传文件的类型、大小等属性 ``` <van-uploader action="//example.com/upload" :before-upload="beforeUpload" :max-size="5 * 1024 * 1024" accept="image/*" /> ``` 其before-upload属性指定在上传前进行的操作,可以用来限制上传文件的类型、大小等属性,max-size属性限制上传文件的最大大小,accept属性限制上传文件的类型,此处指定只能上传图片文件。 4.在Vue实例定义beforeUpload函数,实现上传前的参数设置 ``` methods: { beforeUpload(file) { console.log(file); const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$toast('上传图片只能是 JPG 格式!'); } if (!isLt2M) { this.$toast('上传图片大小不能超过 2MB!'); } return isJPG && isLt2M; } } ``` beforeUpload函数会在上传前调用,可以用来设置上传时的参数,这里我们实现了限制上传图片的格式和大小的功能。 以上是使用van-uploader上传图片的实例,通过简单的配置和绑定函数就可以快速实现文件上传功能,适用于各种Web项目。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值