2020-02-18 19:24:45 +08:00
|
|
|
# 非受控手动提交
|
|
|
|
你可以使用 submit 方法来进行非受控状态下的手动提交。当然你也可以在受控模式下完全控制提交行为。
|
2020-02-18 13:05:07 +08:00
|
|
|
```html
|
2020-02-18 19:24:45 +08:00
|
|
|
<n-button
|
|
|
|
:disabled="!fileListLength"
|
|
|
|
@click="handleClick"
|
|
|
|
style="margin-bottom: 12px;"
|
|
|
|
>
|
|
|
|
上传文件
|
|
|
|
</n-button>
|
2020-02-18 13:05:07 +08:00
|
|
|
<div style="overflow: hidden">
|
|
|
|
<n-upload
|
2020-02-18 19:24:45 +08:00
|
|
|
@change="handleChange"
|
|
|
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
2020-02-18 13:05:07 +08:00
|
|
|
: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
|
|
|
|
}
|
|
|
|
},
|
2020-02-18 13:05:07 +08:00
|
|
|
methods: {
|
2020-02-18 19:24:45 +08:00
|
|
|
handleChange ({
|
|
|
|
fileList
|
|
|
|
}) {
|
|
|
|
this.fileListLength = fileList.length
|
|
|
|
},
|
2020-02-18 13:05:07 +08:00
|
|
|
handleClick () {
|
|
|
|
this.$refs.upload.submit()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|