el-upload 二次上传没有反应,clearFiles不起作用

 

 element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题的坑,clearFiles()也不起作用

 <el-upload class="upload-btn ml10 mr10" ref="uploadfile" 
action :limit="1" accept=".xls, .xlsx" 
:show-file-list="false" :auto-upload="false" 
:on-change="file => importTable(file, row)"
:file-list="fileList">

data() {
  return {
    fileList:[]
  }
}

importTable(file,item) {
      var data = new FormData();
      data.append("file", file.raw);
      data.append("activityId", item.activityId);
      this.fileList = []//这里是重点,替换这个方法(this.$refs.uploadfile.clearFiles())
      importUser(data).then(res => {
        this.$message.success("文件导入成功");
        this.getlist()//更新列表
      })
    },

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于el-upload二次封装,你可以按照以下步骤进行: 1. 创建一个新的组件,例如UploadWrapper.vue。 2. 在UploadWrapper.vue中引入el-upload组件: ```javascript <template> <el-upload></el-upload> </template> <script> import { Upload } from 'element-ui'; export default { components: { 'el-upload': Upload }, } </script> ``` 3. 在UploadWrapper.vue中,将el-upload的props和事件传递给封装组件: ```javascript <template> <el-upload :action="action" :headers="headers" :data="data" :file-list="fileList" :multiple="multiple" :before-upload="beforeUpload" :on-success="onSuccess" :on-remove="onRemove" ></el-upload> </template> <script> // ... export default { // ... props: { action: String, headers: Object, data: Object, fileList: Array, multiple: Boolean }, methods: { beforeUpload(file) { this.$emit('before-upload', file); }, onSuccess(response, file, fileList) { this.$emit('on-success', response, file, fileList); }, onRemove(file, fileList) { this.$emit('on-remove', file, fileList); } } } </script> ``` 4. 在父组件中使用封装组件UploadWrapper.vue: ```javascript <template> <upload-wrapper :action="action" :headers="headers" :data="data" :file-list="fileList" :multiple="multiple" @before-upload="beforeUpload" @on-success="onSuccess" @on-remove="onRemove" ></upload-wrapper> </template> <script> import UploadWrapper from './UploadWrapper.vue' export default { components: { 'upload-wrapper': UploadWrapper }, data() { return { action: 'your-action-url', headers: { // headers配置 }, data: { // 请求携带的额外参数 }, fileList: [], // 文件列表 multiple: true // 是否支持多选 } }, methods: { beforeUpload(file) { // 文件上传前的操作 }, onSuccess(response, file, fileList) { // 文件上传成功的操作 }, onRemove(file, fileList) { // 文件移除的操作 } } } </script> ``` 这样,你就完成了el-upload二次封装。在父组件中,通过props传入el-upload的配置项和事件,并在UploadWrapper组件中进行处理和触发相应的事件。同时可以根据需要自定义一些额外的功能和样式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值