elementplus upload 点击保存添加loading

Element Plus 是一个基于 Vue 3 的组件库，它提供了丰富的组件，包括上传组件（Upload）。在使用 Element Plus 的 Upload 组件进行文件上传操作时，如果想要在点击保存按钮后添加一个加载中的指示器（loading），可以通过监听 Upload 组件的 `submit` 事件，并在事件处理函数中修改组件的状态来显示 loading。

下面是一个简单的实现示例：

1. 在组件模板中使用 `el-upload` 组件，并为其添加 `on-submit` 事件监听器。
2. 在数据对象中定义一个 `loading` 状态，用来控制显示或隐藏 loading。
3. 在 `on-submit` 的事件处理函数中，设置 `loading` 状态为 `true` 来显示 loading，然后执行上传逻辑。
4. 上传完成后，记得将 `loading` 状态设置回 `false`，以隐藏 loading。

<template>
  <el-upload
    class="upload-demo"
    action="your-upload-url"
    :on-submit="handleUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    handleUpload(file, fileList) {
      // 显示 loading
      this.loading = true;
      // 文件上传逻辑，例如使用 axios 发送请求到服务器
      // axios.post('your-upload-url', file).then(response => {
      //   // 上传成功后隐藏 loading
      //   this.loading = false;
      // });
    },
  },
};
</script>

在这个例子中，点击上传按钮后，`handleUpload` 方法会被触发，`loading` 状态被设置为 `true`，从而显示一个加载中的指示器。一旦文件上传完成，你需要在上传成功的回调函数中将 `loading` 状态设置为 `false`，以隐藏加载指示器。