使用场景:要实现上文件有多个方式。默认点击本地上传,点击el-dropdown可以选择其他上传方式
完整代码如下:
<template>
<el-dropdown split-button type="primary" @click.stop="elUpload" @command="(command) => onFileSourceClick(command, scope.index)" size="small">
<el-upload
ref="upload"
:action="上传文件url"
disabled
:show-file-list="false"
:on-error="onError"
:on-change="onChange"
:on-success="(data) => onSuccess(data, scope.row)"
>
<span style="color: #fff">上传文件</span>
</el-upload>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in options" :key="item.value" :command="item.value">{{ item.value }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
name: "MultipleUpload",
data() {
return {
options:[] // 上传文件其他方式
}
},
methods: {
// 文件上传手动触发
elUpload() {
this.$refs["upload"].$children[0].$refs.input.click()
},
// 其他文件多个上传
onFileSourceClick(command, index) {
// 这里触发其他上传方式 一般是个组件
},
onSuccess(data, row) {
},
onError(err, file, fileList) {
this.$message.error("文件上传失败!")
},
onChange(file, fileList) {
// 限制上传文件的大小 200
const isLt = file.size / 1024 / 1024 / 300 <= 1
if (!isLt) {
this.$message.error("上传文件大小不得大于300MB!")
for (var i = 0; i < fileList.length; i++) {
if (fileList[i].uid == uid) {
fileList.splice(i, 1)
}
}
}
return isLt
},
}
}
</script>