Vant Uploader 文件上传全解：图片压缩、预览与后端对接

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';
import type { UploaderFileListItem } from 'vant';

const fileList = ref<UploaderFileListItem[]>([]);

const afterRead = (item: UploaderFileListItem | UploaderFileListItem[]) => {
  const items = Array.isArray(item) ? item : [item];
  items.forEach(async (one) => {
    console.log(one.file); // 原始 File，可直接 append 进 FormData
    one.status = 'uploading';
    one.message = '上传中...';
    await uploadOne(one);
  });
};
</script>

<template>
  <van-uploader
    v-model="fileList"
    :after-read="afterRead"
    result-type="file"
    :max-count="3"
    multiple
  />
</template>

<script setup lang="ts">
import { showToast } from 'vant';

// 1) 类型校验：同步返回 false 即中断读取
const beforeRead = (file: File) => {
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
    showToast('仅支持 JPG / PNG / WebP');
    return false;
  }
  return true;
};

// 2) 按类型给不同体积上限：返回 true 表示超限
const isOverSize = (file: File) =>
  file.size >= (file.type === 'image/jpeg' ? 5 : 8) * 1024 * 1024;

const onOversize = () => showToast('图片不能超过限制大小');
</script>

<template>
  <van-uploader
    :before-read="beforeRead"
    :max-size="isOverSize"
    :max-count="3"
    accept="image/*"
    @oversize="onOversize"
  />
</template>

interface CompressOptions {
  maxWidth?: number;
  maxHeight?: number;
  quality?: number;
}

export function compressImage(file: File, opts: CompressOptions = {}): Promise<File> {
  const { maxWidth = 1280, maxHeight = 1280, quality = 0.8 } = opts;
  return new Promise((resolve, reject) => {
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = () => {
      const ratio = Math.min(maxWidth / img.width, maxHeight / img.height, 1);
      const canvas = document.createElement('canvas');
      canvas.width = Math.round(img.width * ratio);
      canvas.height = Math.round(img.height * ratio);
      const ctx = canvas.getContext('2d');
      if (!ctx) { URL.revokeObjectURL(url); reject(new Error('Canvas 不可用')); return; }
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      canvas.toBlob((blob) => {
        URL.revokeObjectURL(url);
        if (!blob) { reject(new Error('压缩失败')); return; }
        resolve(new File([blob], file.name, { type: 'image/jpeg' }));
      }, 'image/jpeg', quality);
    };
    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('图片解码失败')); };
    img.src = url;
  });
}

const beforeRead = (file: File) =>
  new Promise<File>((resolve, reject) => {
    compressImage(file, { maxWidth: 1280, quality: 0.8 })
      .then(resolve)
      .catch(() => { showToast('图片处理失败'); reject(); });
  });

import type { UploaderFileListItem } from 'vant';

export async function uploadOne(item: UploaderFileListItem): Promise<void> {
  if (!item.file) return;
  const form = new FormData();
  form.append('file', item.file);        // 与后端 $_FILES 的键保持一致
  form.append('biz', 'avatar');

  try {
    const res = await fetch('/api/upload.php', { method: 'POST', body: form });
    const data = await res.json();
    if (!res.ok || !data.url) throw new Error(data.msg || '上传失败');
    item.status = '';
    item.message = '';
    item.url = data.url;                 // 换成服务端地址，便于后续提交表单
  } catch (e) {
    item.status = 'failed';
    item.message = '上传失败，点击重试';
  }
}

<?php
header('Content-Type: application/json; charset=utf-8');
if (!isset($_FILES['file']) || $_FILES['file']['error'] !== UPLOAD_ERR_OK) {
    http_response_code(400);
    echo json_encode(['msg' => '文件接收失败']); exit;
}
$file = $_FILES['file'];
if ($file['size'] > 8 * 1024 * 1024) {
    http_response_code(413);
    echo json_encode(['msg' => '文件过大']); exit;
}
$ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
if (!in_array($ext, ['jpg', 'jpeg', 'png', 'webp'], true)) {
    http_response_code(415);
    echo json_encode(['msg' => '不支持的格式']); exit;
}
$name = date('YmdHis') . '_' . bin2hex(random_bytes(6)) . '.' . $ext;
$dir  = __DIR__ . '/../upload/' . date('Y-m');
if (!is_dir($dir)) mkdir($dir, 0755, true);
move_uploaded_file($file['tmp_name'], $dir . '/' . $name);
echo json_encode(['url' => '/upload/' . date('Y-m') . '/' . $name]);

<van-uploader v-model="fileList" :before-delete="beforeDelete">
  <van-button icon="plus" type="primary">选择图片</van-button>
  <template #preview-cover="{ file }">
    <div class="cover">{{ file.message || file.name || '已上传' }}</div>
  </template>
</van-uploader>