Vant 上传图片闪动问题的原因与解决方案

当使用 Vant 的上传组件时，你可能会遇到以下情况：

1. 选择图片后立即显示本地预览图（正确）

2. 上传到服务器并等待接口返回

3. 接口返回后图片会"闪动"一下再显示

这种闪动现象通常是由于 Vant 上传组件的工作机制导致的。

根本原因

1. 双阶段渲染：

   • 第一阶段：选择文件后立即使用 URL.createObjectURL() 创建本地预览

   • 第二阶段：上传完成后用服务器返回的 URL 替换本地预览

2. URL 替换：

   • 本地预览的 Blob URL 和服务器返回的 HTTP URL 不同

   • 替换时浏览器需要重新加载图片

3. Vant 默认行为：

   • 上传过程中会显示上传状态

   • 上传完成后会更新文件列表

解决方案

方案1：保持使用本地预览（不替换URL）

<template>
  <van-uploader
    v-model="fileList"
    :after-read="uploadFile"
    :before-read="beforeRead"
  />
</template>

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

const fileList = ref([]);

const uploadFile = (file) => {
  // 保持使用本地预览，不上传
  file.status = 'done';
  file.message = '上传成功';
  
  // 如果需要上传到服务器但不替换图片：
  // uploadToServer(file.file).then(res => {
  //   // 不更新URL，保持本地预览
  //   file.status = 'done';
  // });
};
</script>

方案2：优化上传流程避免闪动

vue

复制

<template>
  <van-uploader
    v-model="fileList"
    :after-read="uploadFile"
  />
</template>

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

const fileList = ref([]);

const uploadFile = async (file) => {
  // 1. 立即显示为完成状态
  file.status = 'done';
  
  // 2. 静默上传（不显示上传状态）
  try {
    const serverUrl = await uploadToServer(file.file);
    // 3. 直接更新URL而不改变状态
    file.url = serverUrl;
  } catch (error) {
    // 上传失败时显示错误状态
    file.status = 'failed';
    file.message = '上传失败';
  }
};

async function uploadToServer(file) {
  // 你的上传逻辑
  return 'https://example.com/new-image-url.jpg';
}
</script>

方案3：自定义预览逻辑（推荐）

vue

复制

<template>
  <van-uploader
    v-model="fileList"
    :after-read="handleUpload"
    :before-read="addLocalPreview"
  />
</template>

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

const fileList = ref([]);

// 添加本地预览
const addLocalPreview = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      file.url = event.target.result; // 使用Base64而不是Blob URL
      resolve(true);
    };
    reader.readAsDataURL(file.file);
  });
};

// 上传处理
const handleUpload = async (file) => {
  file.status = 'uploading';
  
  try {
    const serverUrl = await uploadToServer(file.file);
    // 保持相同的URL格式（Base64 -> HTTP）
    file.url = serverUrl;
    file.status = 'done';
  } catch (error) {
    file.status = 'failed';
    file.message = '上传失败';
  }
};
</script>