更新记录

1.1.2（2022-12-01）

• 修改文档

1.1.12（2022-11-29）

• 文档修改

1.1.11（2022-11-29）

• 文档修改

平台兼容性

custom-upload 使用指南

简介

本插件主要目的是提供app端文件离线上传功能，当然你也可以在线使用。

警告: 本插件只支持app端，如需除app端以外的功能，请参考全文件上传选择非原生2.0版。

本插件参考全文件上传选择非原生2.0版组件封装webview的方法，如果你希望获得更全面的上传功能请使用上述插件。

使用方法

Prop

Event

开发人员需在custom-upload.vue文件中修改methods下create方法中的path属性。

当然，你也可以把部分url参数在 /hybrid/html/index.htm 里直接写死，例如 url、baseURL 。

离线上传初级解决方案

通过webview原生input实现上传，如果在线状态直接进行上传，并且返回服务端数据。

如果离线状态，会把File转为Blob存储到IndexedDB,将存储的key返回出去，用户拿到key之后与当前表单数据一起存储到sqlite，待网络正常进行数据上报。

返回的数据用户可以监听change事件进行获取。例如：

<template>
    <custom-upload @change="updateFiles" />
</template>

<script>
    methods: {
    updateFiles(fileList, errList) {
      if (online) {
        // 一般后端返回文件地址 方便预览
      } else {
        // 和表单数据一起存储到 sqlite，字段可以是key，存储的值建议为 'file1,file2' 逗号分隔的字符串
      }
    }
  }
</script>

上报阶段直接给出解决方案

<!--/pages/index/index.vue-->

<script>
  // 这里通过导航栏按钮触发
  onNavigationBarButtonTap({ meta }) {
    if (meta === 'report') {
      uni.showToast({
        title: '点击上报',
        icon: 'none',
        duration: 1000
      })
      // 这里一般调用方法去sqlite拿数据，拿数据之后通过create方法获取上传文件的返回值，和表单数据一起提交，现在直接通过create测试一下。
      // this.create(['file1669621961635']).then((res) => {
      //   console.log(JSON.stringify(res))
      // })
    }
  },
  methods: {
    create(ids) {
      // #ifndef H5
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: '上传中',
          mask: true
        })
        const dataList = []
        const errList = []
        const path = `/hybrid/html/index.html?debug=1&isOnline=1&token=`
        const handler = ({ title }) => {
          const data = decodeURI(title)
          if (data.startsWith('data=')) {
            const arr = data.split('&')
            const dataArr = arr[0].slice(5).split('#')
            const errArr = arr[1].slice(4).split('#')
            dataArr.forEach((item) => {
              if (item) {
                dataList.push(JSON.parse(item))
              }
            })
            errArr.forEach((item) => {
              if (item) {
                errList.push(item)
              }
            })
            this.close()
            resolve({
              data: dataArr,
              err: errArr
            })
          }
        }
        this.wv = plus.webview.create(path, 'custom-webview', {
          plusrequire: 'none',
          'uni-app': 'none',
          top: '-100px',
          left: 0,
          width: '1px',
          height: '1px',
          background: 'transparent'
        })
        this.wv.addEventListener('titleUpdate', handler)
        this.wv.loadURL(path)
        setTimeout(() => {
          this.$root.$scope.$getAppWebview().append(this.wv)
          this.wv.evalJS('reportData(' + JSON.stringify(ids) + ')')
        }, 300)
      })
      // #endif
    },
    close() {
      uni.hideLoading()
      this.wv.close()
    }
  }
</script>

注：默认支持多文件上传。如果不能满足需求，可自行修改源码。