Upload 上传 ​

基础用法 ​

数据绑定一个数组默认需要有name size url分别是文件名，文件大小，文件地址。

<script setup>
import { ref } from 'vue'
const files = ref([
  name: 'images 1.jpg', // 文件名称
  size: 5544985, // 字节数单位为byte
  url: '...', // 文件地址
  // ...
])
</script>
<os-upload v-model="files">
</os-upload>

多选文件 ​

multiple属性设置为true，可开启多选数个文件进行选择。

限制大小 ​

limit属性可设置上传文件数量，类型为数字类型，默认为0，则不限制文件数量，下例限制3个文件。

max-size属性可设置上传文件最大的容量大小，类型为数字类型单位为byte，默认为0，则不限制大小，下例限制1kb。

on-exceed函数在超出文件限制时会运行，返回json格式为{ error: errorType, errorFiles: uploadItem[] }, errorType目前只有limit和maxSize两种类型。

上传模式 ​

mode属性能改变上传框样式与功能，目前支持button input drop，分别是按钮形式，输入框形式，拖拽形式，默认为按钮形式。

button ​

此模式只存在一个选择文件按钮，点击能触发选择文件功能。

input ​

此模式只存在一个输入框，点击能触发选择文件功能，不能手动填写，如设置隐藏列表选择文件后的名字会直接显示在输入框内。

drop ​

drop模式能支持拖拽文件进行上传。

<os-upload
mode="drop">
</os-upload>

隐藏列表 ​

show-list设置为false，能隐藏文件列表内容，此设置建议设置mode为input，能显示选择文件名称。

<os-upload 
v-model="file" 
mode="input" 
:show-list="false">
</os-upload>

照片墙 ​

list-type能设置列表样式text images-card，分别为文字，照片墙，默认为文字。

是/否已上传 ​

有些特殊情况下需要区分文件是否已上传保存到订单里，一般地可通过绑定字段url与插槽item进行区别，如下例，双向绑定的数据url是存在值，意味着是已上传，可尝试添加个本地文件。

文件操作 ​

change事件监听着数据如果有发生变化，添加/删除均会运行。

on-add函数能绑定一个方法选择完文件后会触发，方法直接返回Boolean或Promise函数resolve(Boolean)，如返回值为false则会添加文件失败。

on-delete函数能绑定一个方法点击删除事件时会触发，方法直接返回Boolean或Promise函数resolve(Boolean)，如返回值为false则会删除失败。

on-exceed函数在超出文件限制时会运行。

<os-upload 
v-model="files" 
@change="(items) => { }"
:on-delete="() => {return false}"
:on-add="() => {return false}"
:on-exceed="(addFiles, nowFiles) => {}">
</os-upload>

插槽 ​