el-upload上传多个文件提交保存后怎么清空文件vue2

你可以在上传成功后，通过设置 el-upload 组件的 fileList 属性为空数组来清空已上传的文件。具体实现代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="your/upload/url"
    :on-success="handleSuccess"
    :file-list="fileList"
    :multiple="true"
    >
    <el-button slot="trigger">选取文件</el-button>
    <el-button slot="upload">上传到服务器</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功逻辑
      // 重置 fileList
      this.fileList = []
    }
  }
}
</script>

在上述代码中，我们通过设置 fileList 为空数组来清空已上传的文件。在 handleSuccess 方法中，你可以编写自己的上传成功逻辑，例如展示上传成功的文件列表、保存文件路径等。

相关问题

vue中el-upload上传多个文件

在 Vue 中使用 `el-upload` 组件上传多个文件，可以通过设置 `multiple` 属性来实现。例如：

<el-upload
  class="upload-demo"
  action="/upload"
  :multiple="true"
  :on-success="handleSuccess"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

在上面的代码中，通过 `:multiple="true"` 设置为可以上传多个文件。同时，`file-list` 属性可以绑定一个数组，用于存储上传的文件列表。在 `submitUpload` 方法中，可以通过调用 `upload` 方法来上传文件，如下所示：

methods: {
  submitUpload() {
    this.$refs.upload.upload();
  },
  handleSuccess(res, file) {
    console.log(res, file);
  }
}

在 `handleSuccess` 方法中，可以处理上传成功后的响应。

vue+elementui的table行内实现el-upload文件添加/多文件上传

要在Vue和Element UI表格中实现行内el-upload文件添加/多文件上传，您可以按照以下步骤进行操作：

1. 在表格中添加一个列，用于上传文件。您可以使用Element UI的el-upload组件实现文件上传功能。例如：

<el-table-column label="上传文件">
  <template slot-scope="scope">
    <el-upload
      :action="uploadUrl"
      :on-success="handleSuccess"
      :file-list="scope.row.fileList"
      multiple
      >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </template>
</el-table-column>

在上面的示例中，我们使用了Element UI的el-upload组件，并将它嵌套在表格列的模板中。我们还将文件列表绑定到scope.row.fileList，这样每一行都有自己的文件列表。

2. 在Vue组件中，你需要为el-upload组件提供上传URL和处理成功的方法。例如：

export default {
  data() {
    return {
      uploadUrl: '/api/upload',
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的文件
    },
  },
};

在上面的示例中，我们将上传URL设置为/api/upload，并提供了一个handleSuccess方法来处理成功上传的文件。

3. 如果您想要支持多文件上传，只需要在el-upload组件上添加multiple属性即可。

<el-upload
  :action="uploadUrl"
  :on-success="handleSuccess"
  :file-list="scope.row.fileList"
  multiple
  >

这样就可以在Vue和Element UI表格中实现行内el-upload文件添加/多文件上传了。请注意，这只是一个基本的示例，您可以根据您的实际需求进行更改和扩展。