el-upload怎么上传框中加loading

`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件。要在上传框中添加加载效果，你可以使用 Vue.js 的响应式状态以及一些 CSS 动画或者过渡效果。这里是一个简单的例子：

1. 首先，在模板上添加一个显示/隐藏上传按钮或加载动画的元素，例如一个 `div`，并绑定一个 `v-loading` 属性：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :show-file-list="false"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    v-loading="uploadLoading"
  >
    <!-- 这里可以添加一个点击按钮 -->
    <el-button @click="submitFile" :disabled="uploadLoading">选择文件</el-button>
    <!-- 或者直接使用 <input type="file"> 并设置 @change="handleChange" -->
  </el-upload>
  <div v-if="uploadLoading" class="loading-indicator">正在上传...</div>
</template>

2. 在数据对象中定义 `uploadLoading` 值和相关的事件处理函数：

<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传接口地址',
      uploadLoading: false, // 表示是否加载中
      submitFile() {
        this.uploadLoading = true; // 开始加载时设为 true
        this.$refs.upload.submit(); // 发起上传请求
      },
      handleChange(file) {
        // 上传完成后，将 uploadLoading 设回 false
        this.uploadLoading = false;
      },
      beforeUpload(file) {
        // 在上传开始前检查一些条件，如文件类型、大小等
        // 如果需要取消上传，返回 false
        // ...
        return true;
      },
    };
  },
};
</script>

3. 对于动画效果，你可以在 CSS 中设置 `.loading-indicator` 类的样式，比如使用 `vue-loading-spinner` 库或者自定义 CSS 3 过渡效果。

.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* 添加一个动画 */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}