van-uploader 上传文件回显教程：快速集成与最佳实践

van-uploader 是一个功能强大的 Vue 组件，它可以帮助您轻松实现文件上传功能。但有时您需要在上传完成后将上传的文件信息展示出来，也就是所谓的上传回显。

本文将为您详细介绍如何使用 van-uploader 实现文件上传回显，并提供一些最佳实践建议，帮助您快速集成 van-uploader 并实现高效的文件上传体验。

1. 上传成功后的文件列表展示

在上传完成后，您可以使用 van-uploader 提供的 on-success 事件来获取上传成功的文件信息，并将其展示在页面上。

<template>
  <van-uploader v-model="fileList" :max-count="1" :before-read="beforeRead" @on-success="handleSuccess" />
</template>

<script>
import { ref } from 'vue';
import { uploadFile } from './api'; // 假设您有一个名为 uploadFile 的 API 函数

export default {
  setup() {
    const fileList = ref([]);

    const beforeRead = (file) => {
      // 可以在这里进行文件类型或大小的校验
      // ...
    };

    const handleSuccess = (response, file) => {
      // 将上传成功后的文件信息添加到 fileList 数组
      fileList.value.push(file);
    };

    return {
      fileList,
      beforeRead,
      handleSuccess
    };
  }
};
</script>

2. 进度条更新

van-uploader 内置了进度条功能，您可以在上传过程中实时监控上传进度。

<template>
  <van-uploader v-model="fileList" :max-count="1" :before-read="beforeRead" @on-success="handleSuccess" @on-progress="handleProgress" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    // ... 其他代码

    const handleProgress = (event, file) => {
      // event.percentage 表示当前上传进度百分比
      console.log('上传进度：', event.percentage);
    };

    return {
      // ... 其他属性
      handleProgress
    };
  }
};
</script>

3. 错误处理

van-uploader 提供了 on-error 事件，您可以使用它来处理上传过程中出现的错误。

<template>
  <van-uploader v-model="fileList" :max-count="1" :before-read="beforeRead" @on-success="handleSuccess" @on-error="handleError" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    // ... 其他代码

    const handleError = (err, file) => {
      // err 表示上传错误信息
      console.error('上传错误：', err);
    };

    return {
      // ... 其他属性
      handleError
    };
  }
};
</script>

4. 最佳实践

使用 before-read 事件进行文件类型和大小校验，避免上传无效文件。
使用 on-progress 事件实时更新上传进度，提升用户体验。
使用 on-error 事件处理上传错误，并提供友好的错误提示。
保持上传文件列表的更新，并提供删除已上传文件的选项。

通过以上步骤和最佳实践，您可以轻松实现van-uploader上传文件的回显功能，并为用户提供更加完善的文件上传体验。