更新记录

1.0.0（2025-11-01） 下载此版本

Features

• 初始版本发布
• 支持图片/视频/文件上传
• 支持多文件上传
• 实时上传进度显示
• 文件大小和类型限制
• 图片预览功能
• 自定义上传接口
• 自动上传或手动上传
• 支持删除已上传文件
• 网格/列表展示模式
• 全平台兼容（H5/App/小程序）

平台兼容性

uni-app(3.6.12)

neo-uploader-pro - 高级上传组件

功能强大、易于使用的文件上传组件

📦 特性

• 支持图片/视频/文件上传
• 支持多文件上传
• 实时上传进度显示
• 文件大小和类型限制
• 图片预览功能
• 自定义上传接口
• 自动上传或手动上传
• 支持删除已上传文件
• 网格/列表展示模式
• 自定义上传样式
• 全平台兼容（H5/App/小程序）
• 无任何依赖

快速开始

安装

在 HBuilderX 中右键 uni_modules 目录，选择 从插件市场导入，搜索 neo-uploader-pro 安装。

基础用法

<template>
  <neo-uploader-pro 
    v-model="fileList"
    :max-count="9"
    :max-size="10"
    action="https://your-api.com/upload"
  />
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  }
}
</script>

使用示例

图片上传

<template>
  <neo-uploader-pro 
    v-model="imageList"
    accept="image"
    :max-count="9"
    :max-size="10"
    action="https://your-api.com/upload"
    upload-text="上传图片"
  />
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    }
  }
}
</script>

限制文件类型

<template>
  <neo-uploader-pro 
    v-model="fileList"
    :accept="['jpg', 'png', 'pdf']"
    :max-count="5"
    action="https://your-api.com/upload"
  />
</template>

自定义上传

<template>
  <neo-uploader-pro 
    v-model="fileList"
    :custom-upload="handleUpload"
    @success="handleSuccess"
  />
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 自定义上传逻辑
    async handleUpload(file, ) {
      // 模拟上传进度
      for (let i = 0; i <= 100; i += 10) {
        await this.sleep(100)
        (i)
      }

      // 返回上传结果
      return {
        url: 'https://example.com/uploaded-file.jpg'
      }
    },

    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    },

    handleSuccess({ file, response }) {
      console.log('上传成功', file, response)
    }
  }
}
</script>

手动上传

<template>
  <view>
    <neo-uploader-pro 
      ref="uploader"
      v-model="fileList"
      :auto-upload="false"
    />

    <button @click="handleSubmit">手动上传</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.uploader.submit()
    }
  }
}
</script>

预设文件列表

<template>
  <neo-uploader-pro 
    v-model="fileList"
    action="https://your-api.com/upload"
  />
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        {
          url: 'https://example.com/image3.jpg',
          name: 'custom-name.jpg'
        }
      ]
    }
  }
}
</script>

列表模式

<template>
  <neo-uploader-pro 
    v-model="fileList"
    list-type="list"
    action="https://your-api.com/upload"
  />
</template>

视频上传

<template>
  <neo-uploader-pro 
    v-model="videoList"
    accept="video"
    :max-count="3"
    :max-size="50"
    action="https://your-api.com/upload"
    upload-text="上传视频"
  />
</template>

API

Props

Events

Methods

文件对象结构

{
  uid: String,           // 唯一标识
  name: String,          // 文件名
  size: Number,          // 文件大小（字节）
  type: String,          // 文件类型
  url: String,           // 上传后的 URL
  tempFilePath: String,  // 本地临时路径
  status: String,        // 状态：ready/uploading/success/error
  progress: Number,      // 上传进度 0-100
  response: Object       // 服务器响应
}

常见问题

如何配置上传接口？

设置 action 属性为上传接口地址：

<neo-uploader-pro 
  action="https://your-api.com/upload"
/>

如何获取上传后的 URL？

监听 success 事件或直接使用 v-model 绑定的文件列表：

<neo-uploader-pro 
  v-model="fileList"
  @success="handleSuccess"
/>

如何限制文件类型？

使用 accept 属性：

<!-- 只允许图片 -->
<neo-uploader-pro accept="image" />

<!-- 只允许特定格式 -->
<neo-uploader-pro :accept="['jpg', 'png', 'pdf']" />

如何使用自定义上传？

使用 custom-upload 属性传入自定义上传函数：

async handleUpload(file, ) {
  // 你的上传逻辑
  (50) // 更新进度

  return {
    url: 'uploaded-url'
  }
}

如何预设已有文件？

直接给 v-model 赋值：

fileList: [
  'https://example.com/image1.jpg',
  {
    url: 'https://example.com/image2.jpg',
    name: 'custom-name.jpg'
  }
]

小程序平台注意事项

1. 需要配置上传域名白名单
2. H5 平台才支持通用文件选择
3. 不同平台对文件类型支持不同

样式定制

组件使用了统一的设计系统，所有样式都可以通过修改 CSS 变量来定制。

更新日志

见 changelog.md

开源协议

MIT License