element-ui(vue)upload组件提交后清空文件列表

在 element-ui 的 Upload 组件中，可以通过监听 `success` 事件来清空文件列表。具体操作如下：

1. 给 `el-upload` 组件添加 `ref` 属性，如 `ref="upload"`。

2. 在 `el-upload` 组件上绑定 `success` 事件和对应的处理函数，如下所示：

   <el-upload ref="upload" :on-success="handleSuccess"></el-upload>

3. 在 `handleSuccess` 函数中，调用 `clearFiles` 方法来清空文件列表，如下所示：

   methods: {
     handleSuccess(response, file, fileList) {
       // 处理上传成功的逻辑
       this.$refs.upload.clearFiles(); // 清空文件列表
     }
   }

通过以上操作，当上传成功后，文件列表将被清空。

相关问题

vue element ui upload 组件内图片清空

如果你想在 Element UI Upload 组件内清空图片，可以使用以下方法：

1. 通过 `ref` 获取 Upload 组件实例，并调用 `clearFiles` 方法：

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      action="/upload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture">
      <el-button slot="trigger">上传文件</el-button>
      <el-button type="primary" @click="clearFiles">清空文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
      ]
    }
  },
  methods: {
    clearFiles() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

2. 通过给 Upload 组件绑定一个 `key` 属性，来强制刷新 Upload 组件实例：

<template>
  <div>
    <el-upload
      key="upload"
      class="upload-demo"
      action="/upload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture">
      <el-button slot="trigger">上传文件</el-button>
      <el-button type="primary" @click="clearFiles">清空文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
      ]
    }
  },
  methods: {
    clearFiles() {
      this.fileList = []
    }
  }
}
</script>

以上两种方法都可以实现清空图片的效果，具体使用哪种方法可以根据你的实际情况来决定。

vue用element-UI实现上传本地某一个Excel文件,点击上传按钮,选择文件,上传前验证这个excel文件是否是.xlxs类型 的文件,如果不是提示“请上传.xlxs类型的文件”,如果符合要求,就传递给后端,上传成功后提示“上

传成功”。

实现步骤：

1. 引入element-UI组件库和axios库。

2. 在template中添加一个el-upload组件，设置action为上传接口地址，设置before-upload属性为一个函数。

3. 在methods中定义beforeUpload函数，用来验证上传文件的类型是否为.xlxs。

4. 如果上传文件类型不符合要求，使用this.$message提示用户“请上传.xlxs类型的文件”，并返回false，阻止上传。

5. 如果上传文件类型符合要求，返回true，允许上传。

6. 在methods中定义handleUploadSuccess函数，用来处理上传成功后的逻辑。使用this.$message提示用户“上传成功”。

7. 在methods中定义handleUploadError函数，用来处理上传失败后的逻辑。使用this.$message提示用户“上传失败”。

8. 在data中定义一个变量uploadHeaders，用来设置上传请求的header。

9. 在created生命周期中设置uploadHeaders的值，将token设置到header中。

10. 在mounted生命周期中，使用this.$refs.upload.clearFiles()方法清空上传文件列表，防止重复上传。

示例代码如下：

<template>
<div>
<el-upload
ref="upload"
class="upload-demo"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:headers="uploadHeaders"
:action="uploadUrl"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>

<script>
import axios from 'axios';
export default {
data() {
return {
uploadUrl: 'your_upload_url',
uploadHeaders: {},
};
},
created() {
this.uploadHeaders = {
Authorization: `Bearer ${this.$store.state.token}`,
};
},
methods: {
beforeUpload(file) {
const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (!isXlsx) {
this.$message.error('请上传.xlsx类型的文件');
return false;
}
return true;
},
handleUploadSuccess(response) {
this.$message.success('上传成功');
},
handleUploadError(error) {
this.$message.error('上传失败');
},
},
mounted() {
this.$refs.upload.clearFiles();
},
};
</script>