a-upload的onSuccess事件只触发一次

a-upload 是一个基于 Element UI 的上传组件，onSuccess 事件在上传成功后会被触发。根据官方文档，onSuccess 事件只会触发一次，即每个文件上传成功后只会触发一次。如果您希望在每次上传成功后都触发事件，可以考虑使用 onProgress 事件，该事件会在上传过程中不断触发，直到上传完成。您可以在 onProgress 事件中判断上传是否完成，如果上传完成，则可以执行相应的操作。

相关问题

ant-design of vue中的a-upload组件怎么控制支持上传多个文件时customRequest事件只触发一次

在 ant-design of vue 中的 a-upload 组件中，设置 `multiple` 属性为 `true` 可以支持上传多个文件。但是在上传多个文件时，如果要控制 `customRequest` 事件只触发一次，可以使用以下方式：

1. 在组件中设置 `beforeUpload` 属性为一个函数，在上传前对上传文件进行处理，将多个文件合并成一个文件对象，再将该文件对象作为参数传递给 `customRequest` 方法。

<template>
  <a-upload
    :beforeUpload="beforeUpload"
    :customRequest="customRequest"
    multiple
  >
    <a-button icon="upload">Upload</a-button>
  </a-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(fileList) {
      const file = new File([], 'multiple-files')
      fileList.forEach(f => {
        file.append(f.name, f)
      })
      return file
    },
    customRequest({ file, onProgress, onSuccess, onError }) {
      // handle upload logic here
    }
  }
}
</script>

2. 在 `customRequest` 方法中判断当前上传的文件是否为最后一个文件，只有最后一个文件上传完成后，才调用 `onSuccess` 方法，表示整个上传过程完成。

<template>
  <a-upload :customRequest="customRequest" multiple>
    <a-button icon="upload">Upload</a-button>
  </a-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    customRequest({ file, onProgress, onSuccess, onError }, fileList) {
      const isLastFile = fileList.indexOf(file) === fileList.length - 1
      // handle upload logic here
      if (isLastFile) {
        onSuccess()
      }
    }
  }
}
</script>

el-upload二次封装

对于el-upload的二次封装，你可以按照以下步骤进行：

1. 创建一个新的组件，例如UploadWrapper.vue。

2. 在UploadWrapper.vue中引入el-upload组件：

<template>
  <el-upload></el-upload>
</template>

<script>
import { Upload } from 'element-ui';

export default {
  components: {
    'el-upload': Upload
  },
}
</script>

3. 在UploadWrapper.vue中，将el-upload的props和事件传递给封装组件：

<template>
  <el-upload
    :action="action"
    :headers="headers"
    :data="data"
    :file-list="fileList"
    :multiple="multiple"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    :on-remove="onRemove"
  ></el-upload>
</template>

<script>
// ...
export default {
  // ...
  props: {
    action: String,
    headers: Object,
    data: Object,
    fileList: Array,
    multiple: Boolean
  },
  methods: {
    beforeUpload(file) {
      this.$emit('before-upload', file);
    },
    onSuccess(response, file, fileList) {
      this.$emit('on-success', response, file, fileList);
    },
    onRemove(file, fileList) {
      this.$emit('on-remove', file, fileList);
    }
  }
}
</script>

4. 在父组件中使用封装组件UploadWrapper.vue：

<template>
  <upload-wrapper
    :action="action"
    :headers="headers"
    :data="data"
    :file-list="fileList"
    :multiple="multiple"
    @before-upload="beforeUpload"
    @on-success="onSuccess"
    @on-remove="onRemove"
  ></upload-wrapper>
</template>

<script>
import UploadWrapper from './UploadWrapper.vue'

export default {
  components: {
    'upload-wrapper': UploadWrapper
  },
  data() {
    return {
      action: 'your-action-url',
      headers: { // headers配置 },
      data: { // 请求携带的额外参数 },
      fileList: [], // 文件列表
      multiple: true // 是否支持多选
    }
  },
  methods: {
    beforeUpload(file) {
      // 文件上传前的操作
    },
    onSuccess(response, file, fileList) {
      // 文件上传成功的操作
    },
    onRemove(file, fileList) {
      // 文件移除的操作
    }
  }
}
</script>

这样，你就完成了el-upload的二次封装。在父组件中，通过props传入el-upload的配置项和事件，并在UploadWrapper组件中进行处理和触发相应的事件。同时可以根据需要自定义一些额外的功能和样式。