el-upload在el-dropdown嵌套使用方式

123 阅读1分钟

使用场景:要实现上文件有多个方式。默认点击本地上传,点击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>