vue elementUI el-table upload 一次性自动上传多文件多图片的解决方案，多文件单接口，自动上传

在Vue中使用Element UI的el-table组件和el-upload组件实现一次性自动上传多个文件的功能，可以通过设置el-upload的multiple属性来允许多文件选择，并使用:file-list属性来控制上传的文件列表。以下是一个简单的实现示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="头像" width="180">
      <template slot-scope="scope">
        <el-upload
          :action="uploadUrl"
          :multiple="true"
          :on-success="handleSuccess"
          :file-list="scope.row.files"
          list-type="text"
          style="display: inline-block;">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', files: [] },
        { date: '2016-05-04', name: '张小刚', files: [] }
      ],
      uploadUrl: 'your-upload-api-url'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 假设上传成功后服务器返回的图片URL保存在response.url中
      const row = this.tableData.find(row => row.name === file.name);
      row.files.push({ name: file.name, url: response.url });
    }
  }
}
</script>

在这个示例中，每行表格数据都包含一个files数组，用于存储该行用户上传的文件信息。el-upload组件绑定到每行的头像列，允许用户选择多个文件进行上传。当文件上传成功后，在handleSuccess方法中更新对应行的files数组，将上传成功的文件信息加入到列表中。

注意：uploadUrl应替换为实际的文件上传API地址。handleSuccess方法中的response.url应替换为实际服务器返回的图片URL。