更新记录

0.1.8（2026-08-01） 下载此版本

• 修复 Android 暗黑模式下添加上传格显示为灰白空框：在 APP-ANDROID 下通过 custom-class 识别主题并使用组件内实色背景、边框、图标与文案颜色。鸿蒙继续使用同一原生 App 兜底，Web、iOS 与小程序行为保持不变。

平台兼容性

uni-app x(4.25)

其他

nax-upload

nax-ui 上传组件（uni-app x / uvue）。

提供文件列表预览、选择、删除与状态展示能力。实际上传由业务在 afterRead 中调用 uni.uploadFile 等完成。

依赖：

uni_modules/nax-icon
uni_modules/nax-ui-theme

easycom 自动生效。

推荐同时安装主题包

@import "@/uni_modules/nax-ui-theme/theme/default.css";

页面根节点加 class="nax-theme"。

基础用法

<template>
  <nax-upload
    :file-list="fileList"
    :max-count="6"
    name="photos"
    @after-read="onAfterRead"
    @delete="onDelete"
  ></nax-upload>
</template>

<script setup lang="uts">
  const fileList = ref([] as any[])

  function onAfterRead(e: UTSJSONObject) {
    const files = e.getArray('files')
    // 可在此调用 uni.uploadFile，并更新 fileList 的 status / url
    const next = [] as any[]
    var i = 0
    while (i < fileList.value.length) {
      next.push(fileList.value[i])
      i++
    }
    if (files != null) {
      var j = 0
      while (j < files.length) {
        next.push(files[j])
        j++
      }
    }
    fileList.value = next
  }

  function onDelete(e: UTSJSONObject) {
    // 组件已 emit update:fileList；也可自行处理
  }
</script>

fileList 项结构

Props

Events

Methods（组件 ref）

Slots

自动上传

开启 autoUpload 并配置 action 后，组件在 afterRead 之后自动调用 uni.uploadFile：

<nax-upload
  v-model:file-list="fileList"
  auto-upload
  action="https://example.com/upload"
  :header="header"
  :form-data="formData"
  name="file"
  @success="onSuccess"
  @fail="onFail"
></nax-upload>

const fileList = ref([] as any[])
const header = ref({ Authorization: 'Bearer xxx' } as UTSJSONObject)
const formData = ref({ biz: 'avatar' } as UTSJSONObject)

1. 必须绑定 v-model:file-list，才能回写 uploading/success/failed
2. name 也作为 uploadFile 文件字段名
3. 成功响应尝试解析 url / data.url / path / fileUrl
4. 失败项可调 ref：upload(index) / uploadAll() / reupload(index)

主题变量

• --nax-upload-item-bg
• --nax-upload-item-radius
• --nax-upload-border-color
• --nax-color-bg-secondary / --nax-color-text-secondary 等语义 token

Android / 鸿蒙端（APP-ANDROID || APP-HARMONY）不可靠解析跨组件 CSS 变量。暗色主题时，请通过 custom-class 传入 nax-theme-dark；组件会在内部使用对应的深色背景、边框、图标和文字色，未传入时使用浅色样式。