el-upload添加加载动画

要为 el-upload 添加加载动画，可以使用 before-upload 属性和 v-loading 指令来实现。

首先，在 el-upload 中添加 before-upload 属性，并在其对应的方法中添加 v-loading 指令来触发加载动画。例如：

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
>
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button type="success" v-if="imageUrl">上传成功</el-button>
</el-upload>

然后在 Vue 实例中添加 beforeUpload 方法，该方法会在上传之前被调用。在该方法中可以添加 v-loading 指令来触发加载动画。例如：

export default {
  data() {
    return {
      loading: false,
      imageUrl: ""
    };
  },
  methods: {
    beforeUpload(file) {
      this.loading = true;
      // 上传前的操作
      return true;
    },
    handleUploadSuccess(response, file) {
      // 上传成功的操作
      this.imageUrl = URL.createObjectURL(file.raw);
      this.loading = false;
    }
  }
};

最后，为了确保加载动画可以正常显示，需要在 el-upload 的外层包裹一个容器，并为该容器添加 position: relative; 的样式。例如：

<template>
  <div class="upload-container">
    <el-upload
      class="upload-demo"
      action="/upload"
      :before-upload="beforeUpload"
      :show-file-list="false"
    >
      <el-button slot="trigger" type="primary">选取文件</el-button>
    </el-upload>
    <div v-loading="loading"></div>
  </div>
</template>

<style>
.upload-container {
  position: relative;
}
</style>

这样就可以为 el-upload 添加加载动画了。