vue+el-upload实现多文件动态上传

要实现多文件动态上传，我们可以使用Vue.js提供的el-upload组件来实现。下面是实现此功能的具体步骤：

步骤1：安装el-upload

npm install element-ui -S

步骤2：导入el-upload组件

在Vue组件中导入el-upload组件。在main.js文件中引入element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

步骤3：使用el-upload完成多文件上传

演示1：上传单个文件

<template>
  <el-upload
    action="http://localhost:3000/upload"
    :auto-upload="false"
    :on-change="handleChange"
    :headers="{'Authorization':'token'}">
    <el-button slot="trigger">选取文件</el-button>
    <el-button type="primary" slot="reference">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      debugger;
    }
  }
}
</script>

演示2：上传多个文件

<template>
  <el-upload
    action="http://localhost:3000/upload"
    :multiple="true"
    :auto-upload="false"
    :on-change="handleMultipleChange"
    :headers="{'Authorization':'token'}">
    <el-button slot="trigger">选取文件</el-button>
    <el-button type="primary" slot="reference">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleMultipleChange(file, fileList) {
      debugger;
    }
  }
}
</script>

在以上示例中，我们使用el-upload组件实现了上传单个和多个文件的功能。通过设置action属性来指定数据上传的地址，auto-upload属性来控制选择文件后自动上传还是手动上传，headers属性来添加自定义的请求头部。当选择文件的时候，会触发onChange事件，此时就可以通过file和fileList属性来获取上传的文件信息。

需要注意的是，在Vue.js中，可以通过v-model指令简化从组件提取值以及实现双向数据绑定。因此，我们也可以将上述示例中的on-change事件换成一个v-model来简化代码，示例如下：

<template>
  <el-upload
    action="http://localhost:3000/upload"
    :multiple="true"
    :auto-upload="false"
    v-model="fileList"
    :headers="{'Authorization':'token'}">
    <el-button slot="trigger">选取文件</el-button>
    <el-button type="primary" slot="reference">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  }
}
</script>

以上就是以Vue.js和el-upload组件为基础实现多文件动态上传的攻略，希望对你有所帮助。