在UniApp中实现数据缓存并在有网络连接时上传的功能，通常涉及到以下几个步骤：

1. 数据缓存：当应用处于离线状态或需要暂时保存数据时，可以使用uni.setStorage或uni.setStorageSync方法将数据缓存到本地存储中。

2. 网络状态检测：使用uni.getNetworkType方法获取当前的网络状态，或通过uni.onNetworkStatusChange监听网络状态的变化。这样可以判断当前是否有网络连接。

3. 数据上传：当检测到网络连接时，从本地存储中读取之前缓存的数据，然后使用uni.request方法将数据上传到服务器。

以下是一个简单的示例代码，展示了如何实现这一功能：

export default {
  data() {
    return {
      cachedData: null, // 用于存储缓存的数据
    };
  },
  methods: {
    // 缓存数据
    cacheData(data) {
      this.cachedData = data;
      uni.setStorageSync('cachedData', data);
    },
    // 检查网络状态并上传数据
    checkNetworkAndUpload() {
      uni.getNetworkType({
        success: (res) => {
          if (res.networkType !== 'none') {
            // 有网络连接，上传数据
            this.uploadData(this.cachedData || uni.getStorageSync('cachedData'));
          }
        }
      });
    },
    // 上传数据到服务器
    uploadData(data) {
      uni.request({
        url: 'https://wanjunshijie.com/upload', // 服务器上传接口地址
        method: 'POST',
        data: data,
        success: (res) => {
          console.log('数据上传成功', res);
          // 清除本地缓存的数据
          uni.removeStorageSync('cachedData');
          this.cachedData = null;
        },
        fail: (err) => {
          console.error('数据上传失败', err);
        }
      });
    }
  },
  onShow() {
    // 页面显示时检查网络状态并尝试上传数据
    this.checkNetworkAndUpload();
  }
}

在这个示例中，cacheData方法用于缓存数据到本地存储，checkNetworkAndUpload方法用于检查网络状态并在有网络连接时上传数据，uploadData方法用于将数据上传到服务器。

需要注意的是，实际应用中服务器上传接口地址、数据格式等需要根据具体的业务需求进行调整。此外，为了保护用户数据的安全，上传数据时应考虑使用HTTPS协议，并在服务器端进行相应的安全校验.