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

Question

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

Answer 1

<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>

Answer 2

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

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