多个el-upload手动上传怎么处理?

Question

页面两个el-upload，一个选择appkey文件，一个选择appsecret文件，再点击上传按钮上传，请问怎么处理

Answer 1

没必要，直接在上传组件里面上传就好了，最后提交到服务器的时候多半是一个文件的URL地址。
所以如果不是明确需求是用户选择完文件之后点击上传按钮，同时展示上传进度的需求。那么直接在文件选择完毕之后上传就行了。

如果说是确定一定要一起上传的，那么简单的实现看 el-upload 的组件文档里面有一个 手动上传的示例代码，直接用就行了，多个 el-upload 组件，就用多个 ref 注册就好了。

Answer 2

<template>
  <div>
    <el-upload ref="uploadAppKey" :auto-upload="false" action="your-upload-url" :before-upload="beforeUploadAppKey">
      <el-button slot="trigger" size="small" type="primary">选择 appkey 文件</el-button>
    </el-upload>
    <el-upload ref="uploadAppSecret" :auto-upload="false" action="your-upload-url" :before-upload="beforeUploadAppSecret">
      <el-button slot="trigger" size="small" type="primary">选择 appsecret 文件</el-button>
    </el-upload>
    <el-button type="primary" @click="handleUpload">上传</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // appkey 
    beforeUploadAppKey(file) {
      this.appKeyFile = file;
      return false; 
    },
    // appsecret 
    beforeUploadAppSecret(file) {
      this.appSecretFile = file;
      return false; 
    },
    // 手动上传文件
    handleUpload() {
      if (this.appKeyFile && this.appSecretFile) {
        this.$refs.uploadAppKey.upload(this.appKeyFile);
        this.$refs.uploadAppSecret.upload(this.appSecretFile);
      } else {
        this.$message.error('请先选择 appkey 和 appsecret 文件');
      }
    },
  },
  data() {
    return {
      appKeyFile: null,
      appSecretFile: null,
    };
  },
};
</script>