H5与小程序通过webview 传file的数据

大部分的文章都解决了h5与小程序的通信问题，但大多都是指定的数据，或者数据结构比较简单的，

而最近的需求，需要从h5页面的file文件，传给小程序做统一上传。

在写测试demo的时候，发现，不能将二进制的文件直接传过去，所以，采用了在h5页面获取到文件后

先转成base64的文件，然后在小程序中把base64的文件存成临时文件，再读取写入的文件。

废话少说，接下来直接上代码截图吧

h5页面选择文件+转义

 fileChange (e) {
      this.file = e.target.files[0]
      const fileSize = this.file.size
      const size = fileSize / 1024
      this.fileNameSize = `${this.file.name} ${(size / 1000.0).toFixed(1)}M`

      // 把file文件传给小程序
      this.sendFile(this.file)
    },
    sendFile (file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const data = {
          name: file.name,
          size: file.size / 1024,
          base64data: reader.result,
          file: file || reader.result
        }
        console.log(`[LOG]: sendFile -> data`, data)
        uni.postMessage({ data })
        uni.navigateBack()
      }
    },

小程序里获取

handleMessage(evt) {
      console.log(`[LOG]: 接收到的消息： -> evt`, evt)
      const filename = evt.detail.data[0].name
      const filesize = evt.detail.data[0].size

      const filePath = `${wx.env.USER_DATA_PATH}/${filename}`

      const fsm = uni.getFileSystemManager()
      fsm.writeFileSync(
        filePath,
        _.replace(evt.detail.data[0].base64data, /data:.*base64,/, ''),
        'base64'
      )

      const pages = getCurrentPages()
      const prePage = pages[pages.length - 2]
      if (!prePage) return
      prePage.$vm.isProgress = true
      prePage.$vm.handleResumeParse({
        file: fsm.readFileSync(filePath),
        fileName: filename,
        fileSize: filesize,
        filePath: filePath
      })
    }

小程序上传的函数

over ✌️