uniapp leven系列原生插件

Appearance

leven2026-07-16
941
4.6m

使用方法 ​

介绍 ​

安卓FTP上传下载操作原生插件，支持整个目录下载，整个目录上传，获取文件列表，上传下载进度监听等，插件提供了选择文件和选择目录的方法，插件支持uniapp和uniapp x

插件说明 ​

  • 如果您在使用插件的过程中有任何问题，可以联系作者，作者将全力协助您只用插件
  • 本文档同时提供了uniapp的用法示例和uniappx的用法示例，插件市场导入的示例项目仅为uniapp的用法示例，如果您需要uniappx的示例项目可以通过下方的链接下载示例

    https://pan.baidu.com/s/1vdUzGljwoJbKW3KPLiyyqA?pwd=1bv6

联系作者 ​

关注微信公众号可联系作者

插件地址 ​

https://ext.dcloud.net.cn/plugin?id=28784

权限 ​

  • android.permission.INTERNET
  • android.permission.WRITE_EXTERNAL_STORAGE
  • android.permission.READ_EXTERNAL_STORAGE
  • android.permission.MANAGE_EXTERNAL_STORAGE

用法 ​

在需要使用插件的页面加载以下代码

js
import * as module from "@/uni_modules/leven-uts-ftp"
js
import * as module from "@/uni_modules/leven-uts-ftp"

页面内容 ​

vue
<template>
  <view class="content">
    <uni-card title="登录FTP服务器">
      <view style="margin-bottom: 16px;">
        <uni-section title="服务器地址">
          <uni-easyinput v-model="loginParams.address" placeholder="请输入用户名"></uni-easyinput>
        </uni-section>
        <uni-section title="端口号">
          <uni-easyinput v-model="loginParams.port" placeholder="请输入端口号"></uni-easyinput>
        </uni-section>
        <uni-section title="用户名">
          <uni-easyinput v-model="loginParams.username" placeholder="请输入用户名"></uni-easyinput>
        </uni-section>
        <uni-section title="密码">
          <uni-easyinput v-model="loginParams.password" type="password" placeholder="请输入密码"></uni-easyinput>
        </uni-section>
      </view>
      <button type="primary" @click="login">登录</button>
    </uni-card>
  </view>
</template>

<script>
  import * as module from "@/uni_modules/leven-uts-ftp"
  export default {
    data() {
      return {
        loginParams: {
          //连接地址
          address: "120.77.175.16",
          username: "leven",
          password: "dA5W3h6sL4zcynJY",
          port: 21,
          keepAlive: true
        }
      }
    },
    methods: {
      //显示消息
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      //登录
      login() {
        uni.showLoading({
          title: "正在登录，请稍后..."
        })
        module.connect({
          params: this.loginParams,
          complete: (res) => {
            uni.hideLoading();
            if (res.code == 0) {
              //登录成功后保存服务器名称到缓存 
              uni.setStorageSync("serverAddress", this.loginParams.address + ":" + this.loginParams.port)
              uni.redirectTo({
                url: "/pages/index/home"
              })
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
    }
  }
</script>

<style>

</style>
vue
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <lux-card title="登录FTP服务器">
      <view style="margin-bottom: 16px;">
        <lux-section text="服务器地址">
          <rice-input v-model="loginParams.address" placeholder="请输入用户名"></rice-input>
        </lux-section>
        <lux-section text="端口号">
          <rice-input v-model="loginParams.port" placeholder="请输入端口号"></rice-input>
        </lux-section>
        <lux-section text="用户名">
          <rice-input v-model="loginParams.username" placeholder="请输入用户名"></rice-input>
        </lux-section>
        <lux-section text="密码">
          <rice-input v-model="loginParams.password" type="password" placeholder="请输入密码"></rice-input>
        </lux-section>
      </view>
      <button type="primary" @click="login">登录</button>
    </lux-card>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup>
  import * as module from "@/uni_modules/leven-uts-ftp"
  import { LevenOptions, LevenResult } from "@/uni_modules/leven-uts-ftp"
  type LoginParamsType = {
    address : string,
    username : string,
    password : string,
    port : string,
    keepAlive : boolean
  }
  const loginParams = ref<LoginParamsType>({
    address: "120.77.175.16",
    username: "leven",
    password: "dA5W3h6sL4zcynJY",
    port: "21",
    keepAlive: true
  })

  //显示消息
  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }

  //登录
  function login() {
    uni.showLoading({
      title: "正在登录，请稍后..."
    })
    let params : UTSJSONObject = JSON.parse(JSON.stringify(loginParams.value)) as UTSJSONObject
    module.connect({
      params: params,
      complete: (res : LevenResult) => {
        uni.hideLoading();
        if (res.code == 0) {
          //登录成功后保存服务器名称到缓存 
          uni.setStorageSync("serverAddress", loginParams.value.address + ":" + loginParams.value.port)
          uni.redirectTo({
            url: "/pages/ftp/home"
          })
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  function toAllFilesPermissionPage() {
    module.toAllFilesPermissionPage({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status = data.getBoolean("status")!;
          if (!status) {
            showMessage("所有文件访问权限未打开")
          } else {
            showMessage("权限申请完成，可以使用插件")
          }
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  function checkAllFilesPermission() {
    module.checkAllFilesPermission({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status = data.getBoolean("status")!;
          if (!status) {
            toAllFilesPermissionPage();
          } else {
            showMessage("权限申请完成，可以使用插件")
          }
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  //申请插件所需权限
  function requestPermissions() {
    module.requestPermissions({
      params: {
        permissions: [
          "android.permission.READ_EXTERNAL_STORAGE",
          "android.permission.WRITE_EXTERNAL_STORAGE"
        ]
      },
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          //判断是否有所有文件访问权限
          checkAllFilesPermission();
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  onMounted(() => {
    nextTick(() => {
      requestPermissions();
    })
  })
</script>

<style>

</style>