更新记录

1.0.0（2026-03-16） 下载此版本

1.0.0

平台兼容性

uni-app(4.87)

una-upload-resource

uni-app（小程序）上传资源组件，支持上传图片、视频、或两者混传，内置预览、删除、可选自动上传、文件大小校验、视频时长校验、上传前图片压缩。

功能特性

• 支持资源类型：image / video / all
• 支持最大数量限制：maxCount
• 支持 v-model 双向绑定资源列表
• 支持自动上传（uni.uploadFile）或仅选择本地文件
• 支持图片预览、视频预览
• 支持文件大小与视频时长校验
• 支持上传前图片压缩（质量、阈值、尺寸可控）

快速使用

<template>
  <view>
    <una-upload-resource
      v-model="resourceList"
      acceptType="all"
      :maxCount="9"
      uploadUrl="https://your-api/upload"
      uploadName="file"
      :header="{ Authorization: token }"
      :formData="{ bizType: 'material' }"
      :enableFileSizeCheck="true"
      :maxFileSizeMB="20"
      :enableVideoDurationCheck="true"
      :maxVideoDuration="30"
      :enableCompressImage="true"
      :compressQuality="70"
      :compressThresholdMB="1.5"
      :compressWidth="1280"
      @change="onChange"
      @uploaded="onUploaded"
      @validate-fail="onValidateFail"
      @upload-error="onUploadError"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "Bearer xxx",
      resourceList: []
    };
  },
  methods: {
    onChange(list) {
      console.log("资源列表变化", list);
    },
    onUploaded(e) {
      console.log("单个文件上传成功", e);
    },
    onValidateFail(e) {
      console.log("资源校验失败", e);
    },
    onUploadError(e) {
      console.log("上传失败", e);
    }
  }
};
</script>

Props

事件

modelValue 数据结构

组件输出的列表项示例：

{
  id: "1710000000000_ab12cd",
  type: "image", // image | video
  url: "https://cdn.xxx.com/a.jpg", // 自动上传成功后为服务端地址；否则为本地临时地址
  size: 123456, // 字节
  duration: 0, // 秒，视频时有值
  uploading: false
}

说明

• 自动上传时，会尝试从响应中解析以下字段作为最终地址：data.path、data.url、path、url。
• 若你的后端返回结构不同，建议监听 uploaded 事件后按业务自行转换。
• 组件样式采用资源卡片网格，可直接用于小程序端。