前言

持续输出中～ 上传资源组件经常写，写一个组件通用一下，欢迎大家使用后点评，有需要改善的地方请说出，后续会把开源代码发布出来。
本篇就是告诉大家如何引入使用的。

到 Uniapp 的插件市场，搜索 una-upload-resource
快速通道：https://ext.dcloud.net.cn/search?q=una-upload-resource

一、 插件介绍

1.✨ 功能特性

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

2. Props 参数

参数	类型	默认值	说明
modelValue	Array	[]	资源列表（v-model）
acceptType	String	all	可选：image / video / all
maxCount	Number	9	最大上传数量
uploadUrl	String	""	上传接口地址；不传则只选择本地文件
uploadName	String	file	上传字段名
header	Object	{}	上传请求头
formData	Object	{}	上传附加参数
autoUpload	Boolean	true	是否自动上传
enableFileSizeCheck	Boolean	false	是否开启文件大小校验
maxFileSizeMB	Number	10	单文件最大大小（MB）
enableVideoDurationCheck	Boolean	false	是否开启视频时长校验
maxVideoDuration	Number	60	视频最大时长（秒）
enableCompressImage	Boolean	false	是否开启图片压缩
compressQuality	Number	80	压缩质量（0~100）
compressThresholdMB	Number	0	图片超过该大小才压缩；0 表示开启后始终压缩
compressWidth	Number	0	压缩宽度，0 表示不限制
compressHeight	Number	0	压缩高度，0 表示不限制

3. 事件

事件名	回调参数	说明
update:modelValue	(list)	v-model 同步
change	(list)	资源列表变化
selected	(list)	选择资源完成（未自动上传时常用）
uploaded	({ item, raw })	单个资源上传成功
upload-error	({ item, error })	单个资源上传失败
remove	({ index, item })	删除资源
validate-fail	({ message, type, size, duration, file })	文件校验失败

4. modelValue 数据结构

组件输出的列表项示例：

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

5. 说明

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

二、插件使用示例

1. 下载路径

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

这个广告30s，相当于激励俺继续维护，大部分插件都是这么设置了，大家在观看的时候页面不要关闭，看完在手机上关闭广告，等待uni变更状态就行。
也可以选择 “赞赏插件跳过广告” 😁

手机端显示：
观看完毕后，点击关闭，等待状态文字变更，再关闭这个uni的小程序。

电脑端就会有个alert，是否运行打开Hbuilderx，点击允许，就跳到HbuilderX中了。选择你要导入的项目

tip： 可以只打开一个窗口，窗口内就一个项目，这样识别会好一些。
我再同一个窗口内，多开了几个项目，有几次没检测到，我又重新看了广告。

点击“确认”，查看此时在哪个目录里。
【注意】因为uniapp修改了传入的目录结构，我的项目结构为 components/una-bubble，若有冲突，保证自己的项目不被影响的前提下，点击忽略冲突，别替换了自己项目的文件

成功会有一个提示

2. 引入组件

1）方法一：放入uni_modules

在 uni_modules中新建一个目录una-upload-resource，将下载的 componets下的文件都放入这个目录中。如图：

2）放入components

可以删除无用的 文件，如package.json 、 README.md。

这里我留着是示例如果有同学需要看的话，就放入这个文件夹里，不然自己的其他组件多了之后不好管理文件。

3. 常见场景配置模板

1) 仅图片上传

<una-upload-resource
  v-model="resourceList"
  acceptType="image"
  :maxCount="9"
  uploadUrl="https://your-api/upload"
  uploadName="file"
/>

2) 仅视频上传（限制时长）

<una-upload-resource
  v-model="resourceList"
  acceptType="video"
  :maxCount="3"
  uploadUrl="https://your-api/upload"
  :enableVideoDurationCheck="true"
  :maxVideoDuration="30"
/>

3) 图片+视频混传（开启压缩与大小校验）

<una-upload-resource
  v-model="resourceList"
  acceptType="all"
  :maxCount="9"
  uploadUrl="https://your-api/upload"
  :enableFileSizeCheck="true"
  :maxFileSizeMB="20"
  :enableVideoDurationCheck="true"
  :maxVideoDuration="60"
  :enableCompressImage="true"
  :compressQuality="70"
  :compressThresholdMB="1.5"
  :compressWidth="1280"
/>

4) 仅本地选择，不自动上传

<una-upload-resource
  v-model="resourceList"
  acceptType="all"
  :maxCount="9"
  :autoUpload="false"
  @selected="onSelected"
/>

methods: {
  onSelected(list) {
    // list 中是本次选择的资源，url 为本地临时路径
    // 可在这里自行调用上传逻辑
    console.log("selected:", list);
  }
}

4. 在微信小程序中运行

如果大家用着不错，可以动动手指打赏俺，有问题可以私信我，需要qq群维护也请留言，多的话，我再建群哦

三、其他插件文章

更多插件见专栏～