van

van"/>

van

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: '', //仅为示例，非真实的接口地址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>