vue-upload-component onloaded取得上传后文件信息

Vue-upload-component 提供了 on-success 属性用于获取上传成功后的文件信息。该属性绑定的方法会在上传成功后执行，并且会传入一个参数，该参数即为上传成功后的文件信息。例如：

<template>
  <div>
    <file-upload
      ref="fileUpload"
      :extensions="['jpg', 'png']"
      :on-success="onSuccess"
    />
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload,
  },
  methods: {
    onSuccess(file) {
      console.log('文件上传成功：', file);
    },
  },
};
</script>

在上述代码中，我们将 on-success 属性绑定到了一个方法 onSuccess 上。当文件上传成功后，该方法会被执行，并且会将上传成功后的文件信息作为参数传入。在该方法中，我们可以通过打印参数 file 来获取上传后的文件信息。

相关问题

vue-upload-component多文件上传样例

以下是使用 vue-upload-component 组件实现多文件上传的示例代码：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :multiple="true"
      :post-action="uploadUrl"
      @upload-success="onSuccess"
      @upload-error="onError"
    >
      <button>选择文件</button>
    </vue-upload-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadUrl: 'your-upload-url'
      }
    },
    methods: {
      onSuccess(response, file, fileList) {
        console.log('上传成功')
        console.log(response)
        console.log(file)
        console.log(fileList)
      },
      onError(err, file, fileList) {
        console.log('上传失败')
        console.log(err)
        console.log(file)
        console.log(fileList)
      }
    }
  }
</script>

在上面的代码中，`vue-upload-component` 组件的 `multiple` 属性设置为 `true`，表示支持多文件上传。`post-action` 属性设置为上传文件的 URL 地址。`upload-success` 和 `upload-error` 事件分别表示上传成功和上传失败时的回调函数。在回调函数中可以获取到上传的响应数据、上传的文件对象和文件列表。

在vue3中 vue-upload-component多文件上传示例

在Vue3中，你可以使用vue-upload-component插件进行多文件上传操作。以下是一个示例代码：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :multiple="true"
      :extensions="['jpg', 'jpeg', 'png']"
      :max-size="5"
      :url="uploadUrl"
      @input-filter="inputFilter"
      @upload-success="uploadSuccess"
      @upload-error="uploadError"
    >
      <button>Upload Files</button>
    </vue-upload-component>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component';

export default {
  components: {
    VueUploadComponent,
  },
  data() {
    return {
      uploadUrl: 'your-upload-url',
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && (!oldFile || oldFile.error)) {
        if (/\.(jpg|jpeg|png)$/.test(newFile.name.toLowerCase())) {
          newFile.new = true;
        } else {
          prevent();
          this.$notify({
            title: 'Error',
            message: 'Only upload jpg/jpeg/png files',
            type: 'error',
          });
        }
      }
    },
    uploadSuccess(response, file, fileList) {
      console.log('Upload Success', response, file, fileList);
    },
    uploadError(response, file, fileList) {
      console.log('Upload Error', response, file, fileList);
    },
  },
};
</script>

在这个示例中，我们首先引入了vue-upload-component插件，然后在模板中使用了这个组件，并设置了相关属性和事件。其中，我们设置了multiple属性为true，这样可以允许用户选择多个文件进行上传；设置了extensions属性为['jpg', 'jpeg', 'png']，这样可以限制只能上传jpg、jpeg和png格式的文件；设置了max-size属性为5，这样可以限制文件大小不超过5MB；设置了url属性为上传接口的地址。在事件中，我们实现了inputFilter、uploadSuccess和uploadError三个方法，用来过滤文件、处理上传成功和上传失败的情况。