el-upload 上传同名图片不刷新

如果你上传的图片与之前已经存在的同名图片相同，那么可能会导致浏览器缓存问题，从而不刷新。你可以通过以下几种方式解决这个问题：

1. 在 el-upload 组件中设置 :with-credentials="true" 属性，这样每次上传都会带上 cookies，从而避免浏览器缓存。

2. 在后端代码中修改图片名称，避免上传的图片与已存在的同名图片相同。

3. 在前端代码中，每次上传图片时，在图片名称后面加上一些随机字符串，避免上传的图片与已存在的同名图片相同。例如：

const randomString = Math.random().toString(36).substring(2);
const filename = file.name + '-' + randomString;

这样每次上传都会生成一个新的文件名，即使图片内容相同也不会覆盖原有的同名图片。

相关问题

el-upload 校验同名文件

可以通过设置 `before-upload` 属性来进行同名文件的校验。具体实现方式如下：

1. 在 `before-upload` 方法中，获取当前上传的文件列表和已经上传的文件列表。
2. 遍历当前上传的文件列表，判断是否有同名文件。
3. 如果有同名文件，则返回 `false`，否则返回 `true`。

以下是示例代码：

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
>
  <el-button slot="trigger">选取文件</el-button>
  <el-button style="margin-left: 10px;" type="primary">上传到服务器</el-button>
</el-upload>

data() {
  return {
    fileList: [], // 已经上传的文件列表
  };
},
methods: {
  beforeUpload(file) {
    const isExist = this.fileList.some(item => item.name === file.name);
    if (isExist) {
      this.$message.error('同名文件已存在！');
      return false;
    }
    return true;
  },
},

el-upload点击事件不在el-upload中如何触发选文件（其他按钮触发el-upload上传）

可以使用el-upload组件提供的ref属性获取到el-upload的组件实例，在其他按钮的点击事件中通过调用实例的click()方法来触发选文件操作。例如：

<el-upload ref="uploadRef"></el-upload>

<el-button @click="selectFile">选择文件</el-button>

methods: {
  selectFile() {
    this.$refs.uploadRef.click()
  }
}

这样点击"选择文件"按钮时，就会触发el-upload的选文件操作。