ElementUI上传组件el-upload无法第二次上传怎么解决

引言

ElementUI 是一套基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件，其中 el-upload 是用于文件上传的组件。在实际开发中，很多开发者会遇到 el-upload 组件在第一次上传成功后，无法进行第二次上传的问题。本文将详细分析这个问题的原因，并提供多种解决方案。

问题描述

在使用 el-upload 组件时，用户选择文件并成功上传后，再次选择文件时，发现文件无法上传。具体表现为：

1. 第一次上传文件时，文件可以正常上传。
2. 第二次上传文件时，文件选择框弹出后，选择文件后没有任何反应，文件没有上传。

问题分析

1. 文件列表未清空

el-upload 组件内部维护了一个文件列表 fileList，用于记录已上传的文件。如果在上传成功后没有清空这个列表，组件会认为文件已经上传过，从而阻止再次上传。

2. on-success 回调未处理

el-upload 组件提供了一个 on-success 回调函数，用于在上传成功时执行一些操作。如果在这个回调函数中没有正确处理文件列表，可能会导致文件列表未清空，从而影响第二次上传。

3. before-upload 钩子函数问题

el-upload 组件还提供了一个 before-upload 钩子函数，用于在上传之前对文件进行一些处理。如果在这个钩子函数中没有正确处理文件，可能会导致上传失败。

4. 文件上传限制

el-upload 组件支持设置上传文件的限制，如文件类型、文件大小等。如果第二次上传的文件不符合这些限制，可能会导致上传失败。

解决方案

1. 清空文件列表

在 on-success 回调函数中，手动清空 fileList，以确保组件可以接受新的文件上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :file-list="fileList">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 清空文件列表
      this.fileList = [];
    }
  }
};
</script>

2. 使用 before-upload 钩子函数

在 before-upload 钩子函数中，可以对文件进行一些预处理，如检查文件类型、文件大小等。如果文件不符合要求，可以阻止上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :file-list="fileList">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleSuccess(response, file, fileList) {
      // 清空文件列表
      this.fileList = [];
    }
  }
};
</script>

3. 使用 on-change 回调函数

el-upload 组件还提供了一个 on-change 回调函数，用于在文件状态改变时执行一些操作。可以在这个回调函数中手动清空文件列表。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :file-list="fileList">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 手动清空文件列表
      this.fileList = [];
    },
    handleSuccess(response, file, fileList) {
      // 清空文件列表
      this.fileList = [];
    }
  }
};
</script>

4. 使用 auto-upload 属性

el-upload 组件提供了一个 auto-upload 属性，用于控制是否自动上传文件。如果设置为 false，则需要手动调用 submit 方法来触发上传。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :auto-upload="false"
    :on-success="handleSuccess"
    :file-list="fileList"
    ref="upload">
    <el-button type="primary">点击上传</el-button>
    <el-button type="success" @click="submitUpload">手动上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleSuccess(response, file, fileList) {
      // 清空文件列表
      this.fileList = [];
    }
  }
};
</script>

5. 使用 limit 属性

el-upload 组件提供了一个 limit 属性，用于限制上传文件的数量。如果设置为 1，则只能上传一个文件。如果需要上传多个文件，可以设置为更大的值。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :limit="1"
    :on-success="handleSuccess"
    :file-list="fileList">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 清空文件列表
      this.fileList = [];
    }
  }
};
</script>

结论

el-upload 组件无法第二次上传的问题，通常是由于文件列表未清空或上传限制未正确处理导致的。通过清空文件列表、使用 before-upload 钩子函数、使用 on-change 回调函数、使用 auto-upload 属性或使用 limit 属性，可以有效解决这个问题。希望本文提供的解决方案能够帮助到遇到类似问题的开发者。