|
|
@@ -35,11 +35,11 @@ app.use(Progress);
|
|
|
<nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { ref } from 'vue';
|
|
|
+import { reactive } from 'vue';
|
|
|
export default {
|
|
|
setup() {
|
|
|
const uploadUrl = 'https://xxxxx';
|
|
|
- const defaultFileList = ref([
|
|
|
+ const defaultFileList = reactive([
|
|
|
{
|
|
|
name: '文件1.png',
|
|
|
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
|
|
|
@@ -81,11 +81,11 @@ export default {
|
|
|
</nut-uploader>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { ref } from 'vue';
|
|
|
+import { reactive } from 'vue';
|
|
|
export default {
|
|
|
setup() {
|
|
|
const uploadUrl = 'https://xxxxx';
|
|
|
- const defaultFileList = ref([
|
|
|
+ const defaultFileList = reactive([
|
|
|
{
|
|
|
name: '文件1.png',
|
|
|
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
|
|
|
@@ -324,7 +324,8 @@ export default {
|
|
|
<template>
|
|
|
<nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
|
|
|
<br />
|
|
|
- <nut-button type="success" size="small" @click="submitUpload">执行上传</nut-button>
|
|
|
+ <nut-button type="success" size="small" @click="submitUpload">手动执行上传</nut-button>
|
|
|
+ <nut-button type="danger" size="small" @click="clearUpload">手动清空上传</nut-button>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { ref } from 'vue';
|
|
|
@@ -335,10 +336,14 @@ export default {
|
|
|
const submitUpload = () => {
|
|
|
uploadRef.value.submit();
|
|
|
};
|
|
|
+ const clearUpload = () => {
|
|
|
+ uploadRef.value.clearUploadQueue();
|
|
|
+ };
|
|
|
return {
|
|
|
uploadUrl,
|
|
|
uploadRef,
|
|
|
- submitUpload
|
|
|
+ submitUpload,
|
|
|
+ clearUpload
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
@@ -358,33 +363,33 @@ export default {
|
|
|
|
|
|
### Prop
|
|
|
|
|
|
-| 字段 | 说明 | 类型 | 默认值 |
|
|
|
-|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
|
|
|
-| auto-upload | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | Boolean | true |
|
|
|
-| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
|
|
|
-| url | 上传服务器的接口地址 | String | - |
|
|
|
-| v-model:file-list | 默认已经上传的文件列表 | FileItem[] | [] |
|
|
|
-| is-preview | 是否上传成功后展示预览图 | Boolean | true |
|
|
|
-| is-deletable | 是否展示删除按钮 | Boolean | true |
|
|
|
-| method | 上传请求的 http method | String | "post" |
|
|
|
-| list-type | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture" |
|
|
|
-| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | String | false |
|
|
|
-| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
|
|
|
-| maximum | 文件上传数量限制 | Number丨String | 1 |
|
|
|
-| clear-input | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | true |
|
|
|
-| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
|
|
|
-| headers | 设置上传的请求头部 | Object | {} |
|
|
|
-| data | 附加上传的信息 formData | Object | {} |
|
|
|
-| upload-icon | 上传区域[图标名称](#/icon)或图片链接 | String | "photograph" |
|
|
|
-| upload-icon-size | 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
|
|
|
-| xhr-state | 接口响应的成功状态（status）值 | Number | 200 |
|
|
|
-| with-credentials | 支持发送 cookie 凭证信息 | Boolean | false |
|
|
|
-| multiple | 是否支持文件多选 | Boolean | false |
|
|
|
-| disabled | 是否禁用文件上传 | Boolean | false |
|
|
|
-| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
|
|
|
-| before-upload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
|
|
|
-| before-xhr-upload`v3.2.1` | 执行 XHR 上传时，自定义方式 | Function(xhr，option) | null |
|
|
|
-| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
|
|
|
+| 字段 | 说明 | 类型 | 默认值 |
|
|
|
+|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
|
|
|
+| auto-upload | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | Boolean | true |
|
|
|
+| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
|
|
|
+| url | 上传服务器的接口地址 | String | - |
|
|
|
+| v-model:file-list | 默认已经上传的文件列表 | FileItem[] | [] |
|
|
|
+| is-preview | 是否上传成功后展示预览图 | Boolean | true |
|
|
|
+| is-deletable | 是否展示删除按钮 | Boolean | true |
|
|
|
+| method | 上传请求的 http method | String | "post" |
|
|
|
+| list-type | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture" |
|
|
|
+| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | String | false |
|
|
|
+| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
|
|
|
+| maximum | 文件上传数量限制 | Number丨String | 1 |
|
|
|
+| clear-input | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | true |
|
|
|
+| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
|
|
|
+| headers | 设置上传的请求头部 | Object | {} |
|
|
|
+| data | 附加上传的信息 formData | Object | {} |
|
|
|
+| upload-icon | 上传区域[图标名称](#/icon)或图片链接 | String | "photograph" |
|
|
|
+| upload-icon-size | 上传区域[图标尺寸](#/icon)大小，如 `20px` `2em` `2rem` | String or Number | - |
|
|
|
+| xhr-state | 接口响应的成功状态（status）值 | Number | 200 |
|
|
|
+| with-credentials | 支持发送 cookie 凭证信息 | Boolean | false |
|
|
|
+| multiple | 是否支持文件多选 | Boolean | false |
|
|
|
+| disabled | 是否禁用文件上传 | Boolean | false |
|
|
|
+| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
|
|
|
+| before-upload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
|
|
|
+| before-xhr-upload`v3.2.1` | 执行 XHR 上传时，自定义方式 | Function(xhr，option) | null |
|
|
|
+| before-delete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
|
|
|
|
|
|
|
|
|
|
|
|
@@ -416,7 +421,7 @@ export default {
|
|
|
|
|
|
通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Uploader 实例并调用实例方法
|
|
|
|
|
|
-| 方法名 | 说明 | 参数 | 返回值 |
|
|
|
-|------------------|------------------------------------------------------------|------|--------|
|
|
|
-| submit | 手动上传模式，执行上传操作 | - | - |
|
|
|
-| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | - | - |
|
|
|
+| 方法名 | 说明 | 参数 | 返回值 |
|
|
|
+|------------------|------------------------------------------------------------|-------|--------|
|
|
|
+| submit | 手动上传模式，执行上传操作 | - | - |
|
|
|
+| clearUploadQueue | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | index | - |
|
richard1015