uniapp开发H5和微信小程序上传文件或者图片（使用uni-file-picker扩展组件）和chooseMessageFile报错修复

使用uniapp开发H5和微信小程序时需要考虑兼容性问题

问题===》在开发时由于H5端是由别的同事开发，使用了vant组件，并没有考虑到微信小程序的兼容开发，导致微信小程序出现许多兼容性问题。（Vue3+uniapp+多端开发建议不要使用vant组件，兼容性很差，适用于微信小程序的Vant Weapp版本太低）

解决===》所以我就使用了uniappd的扩展组件uni-file-picker，多端开发兼容性更好。

uni-file-picker 的组件使用说明地址===》链接: uni-file-picker

上传多种图片的情形（最常用）

图片有点糊


html代码

<view class="value uploader">
      <uni-file-picker
        limit="9"
        title="最多选择9张图片"
        @select="wxHandleUpload($event, index)"
        @delete="wxDeleteImage($event, index)"
      ></uni-file-picker>
    </view>

script代码

const wxHandleUpload = async (e, index) => {
  e.tempFiles.forEach((item) => {
    wx.uploadFile({
      url: `上传文件至服务器的完整接口`,
      filePath: item.path,
      name: 'file',
      //请求头中添加一些东西
      header: {
        credentials: 'include',
      },
      //上传成功后的逻辑处理
      success(response) {
        const { data } = response
        let res = undefined
        if (data) {
          res = JSON.parse(data)
        }
        if (!detail.value) return
        let pictureRes = detail.value?.indicatorsResVOS[index]?.pictureRes || []
        pictureRes.push(res?.data)
        detail.value.indicatorsResVOS[index].pictureRes = pictureRes
      },
      fail(err) {
        console.log('上传失败', err)
      },
    })
  })
}

上传单个文件的情形，点击上传的文件可以再次选择文件（使用插槽自定义上传文件按钮样式+单选图片或者文件且点击再次选择）

再次点击文件就可以重新上传文件（这里有个重点，再次上传时要清除上一次上传的文件，否则就会报错）

html代码

 <uni-file-picker
    ref="upload"
    @select="handleUpload"
    :limit="1"
    file-mediatype="all"
    return-type="object"
  >
    <view class="uploader">
      <text v-if="fileName">{{ fileName }}</text>
      <text v-else>点击上传</text>
      <uni-icons
        class="backIcon"
        type="right"
        size="16"
        color="#1989fa"
      ></uni-icons>
    </view>
  </uni-file-picker>

script代码（**一定要清除上一次上传的文件，否则会报错）

const handleUpload = async (e, index) => {
  const { tempFiles } = e
  uni.uploadFile({
    url: `上传文件至服务器的完整接口`,
    filePath: tempFiles[0].url,
    name: 'file',
    //添加请求头
    header: {
      credentials: 'include',
    },
    success: (response) => {
      fileName.value = tempFiles[0].name
      const { data } = response
      let res = undefined
      if (data) {
        res = JSON.parse(data)
      }
      attachment.value = {
        fileName: res?.data?.name,
        path: res?.data?.path,
      }
      //清除上一次上传的文件
      proxy.$refs.upload.clearFiles()
    },
    fail: (err) => {
      console.log('上传失败', err)
    },
    complete: () => {},
  })
}

注意

这里我使用了$refs来获取uni-file-picker的组件中的方法clearFiles()来清除上一次的文件缓存，如果不清除的话就会报这个错误，并且文件资源管理器都打不开。

errMsg: “chooseMessageFile:fail param count should be larger than 0.”