<FormItem label="脚本上传">
<Upload
class="uploadButton"
ref="uploadButton"
:on-success="handleUploadSuccess"
:format="uploadFormat"
:on-format-error="handleFormatError"
:before-upload="handleClearFiles"
action="http://file.cs/upload/files">
<Button>Upload</Button>
</Upload>
<a class="exportBtn" v-if="this.modal.type === 'update'" v-bind:href="formItem.kafkaPsUrl">查看文件</a>
</FormItem>
methods () {
handleChangeKafkaPsType (value) { // 确定上传文件格式format
if (value === 'python') {
this.uploadFormat = ['py']
} else if (value === 'sh') {
this.uploadFormat = ['sh']
} else {
this.uploadFormat = ['js']
}
},
handleUploadSuccess (res, file) {
this.formItem.kafkaPsUrl = res.data.url
},
handleClearFiles () { // 再次点击上传之前,清空之前已上传文件
this.$refs.uploadButton.clearFiles()
},
handleFormatError (file) {
this.$Message.warning({
content: file.name + '文件类型不正确, 请选择' + this.uploadFormat.join(' or') + '类型',
duration: 5
})
}
}
选择文件上传,上传到相应的服务器上,并返回查看该文件的url.
before-upload:上传文件之前,清空已上传文件,避免上传多个文件。
on-success | 文件上传成功时的钩子,返回字段为 response, file, fileList |
on-format-error | 文件格式验证失败时的钩子,返回字段为file, fileList |
before-upload | 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传 |