Upload组件 jb-upload

jb-upload组件是在NaiveUI的Upload组件基础上扩展的一个组件，所以NaiveUI中支持的属性在jb-upload中都可以使用。

jb-upload做了以下扩展：

简单配置即可上传到七牛云或后台服务器
支持将上传的文件地址拼接成一个字符串返回
也支持接收一个多文件地址拼接的字符串，自动解析成文件数组

Props

名称	类型	默认值	说明
modelValue	string\|string[]	`undefined`	绑定的值
valueJoin	string\|false	`,`	上传的文件地址是否join成一个字符串，false代表不join返回数组结构，字符串代表join使用的字符，value返回的是join后的一个完整字符串
uploadTo	UploadTo	`.env-config`中`defaultUploadTo`配置项值	将图片或者视频上传到哪里具体说明参考
qiniuSn	string	`.env-config`中`defaultQiniuSn`配置项值	七牛上传时，使用哪个配置，具体说明参考
savePath	string	``	文件服务器的保存路径，路径支持动态生成，通过{}指定规则生成动态值，具体规则说明
imgSavePath	string	`img/editor/<br/>{date(yyMMddHHmm)}/<br/>{random(5)}/{ori}`	图片上传到文件服务器的保存路径，路径支持动态生成，通过{}指定规则生成动态值，具体规则说明
onlyShow	boolean	`false`	是否只用于展示文件列表，不上传

示例

最简单的用法, model值可以为http://a.com/1.jpg,http://a.com/2.jpg 这种格式的值，也可以为['http://a.com/1.jpg','http://a.com/2.jpg'] 这种格式的值，组件都会自动处理。

vue

<jb-upload
    v-model="form.files"
    :multiple="true"
    save-path="sysnotice/{date(yyMMdd)}/{random(6)}/{ori}"
>
    <n-button>上传文件</n-button>
</jb-upload>

<jb-upload
    v-model="form.files"
    :multiple="true"
    save-path="sysnotice/{date(yyMMdd)}/{random(6)}/{ori}"
>
    <n-button>上传文件</n-button>
</jb-upload>

不上传只用于展示文件列表

vue

<jb-upload
    :model-value="data.files ?? []"
    :only-show="true"
    show-download-button
    :show-remove-button="false"
    :show-cancel-button="false"
></jb-upload>

<jb-upload
    :model-value="data.files ?? []"
    :only-show="true"
    show-download-button
    :show-remove-button="false"
    :show-cancel-button="false"
></jb-upload>

Upload组件 jb-upload ​

Props ​

示例 ​

Upload组件 jb-upload

Props

示例