naive-ui/demo/documentation/components/upload/zhCN/submitManually.md

46 lines
914 B
Markdown
Raw Normal View History

2020-02-18 19:24:45 +08:00
# 非受控手动提交
你可以使用 submit 方法来进行非受控状态下的手动提交。当然你也可以在受控模式下完全控制提交行为。
```html
2020-02-18 19:24:45 +08:00
<n-button
:disabled="!fileListLength"
@click="handleClick"
style="margin-bottom: 12px;"
>
上传文件
</n-button>
<div style="overflow: hidden">
<n-upload
2020-02-18 19:24:45 +08:00
@change="handleChange"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-upload="false"
multiple
ref="upload"
>
<n-button>选择文件</n-button>
</n-upload>
</div>
```
```js
import archiveOutline from 'naive-ui/lib/icons/archive-outline'
export default {
components: {
archiveOutline
},
2020-02-18 19:24:45 +08:00
data () {
return {
fileListLength: 0
}
},
methods: {
2020-02-18 19:24:45 +08:00
handleChange ({
fileList
}) {
this.fileListLength = fileList.length
},
handleClick () {
this.$refs.upload.submit()
}
}
}
```