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

拾荒旧痕2023-10-27 8:42

van-uploader使用报错

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

解决：主要是要实现图片上传功能，可以使用uniapp自带的上传组件（uni.uploadFile）

示例：

javascript 复制代码

<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>