vue3.0+ant-design-vue 实现手动上传，限制文件格式和大小并可以预览

本文链接：https://blog.youkuaiyun.com/ssssummer/article/details/123185482

本文详细介绍了在Ant Design中实现图片上传前的格式和大小限制，以及预览功能。通过beforeUpload方法限制文件大小不超过50MB且必须为JPEG或PNG格式，并利用读取文件内容为DataURL来实现预览。此外，还提供了手动上传的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先上效果图，在这部分需求里限制了只能上传一个文件并且限制了文件的格式和大小
在这里插入图片描述

在这里插入图片描述
2.代码如下

		<a-form-item label="上传图片">
            <a-upload
              v-model:file-list="fileList"
              list-type="picture-card"
              :before-upload="beforeUpload"
              @preview="handlePreview"
            >
              <div v-if="fileList.length < 1"> // 上传一张图片后隐藏上传按钮
                <plus-outlined />
              </div>
            </a-upload>
            <a-modal
              :visible="previewVisible"
              :footer="null"
              @cancel="handleCancelPreview"
            >
              <img style="width: 100%" :src="previewImage" />
            </a-modal>
 		</a-form-item>

方法部分：

 const beforeUpload = (file) => {
      const isLt50M = file.size / 1024 / 1024 < 50;
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      return new Promise((resolve, reject) => {
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          if (isLt50M && isJpgOrPng) {
            file.thumbUrl = e.target.result;
            fileList.value = [...fileList.value, file];
            return false;  // 阻止自动上传动作
          } else {
            fileList.value = [];
            message.error("请检查图片格式和大小!");
            reject(file);
          }
        };
        reader.onerror = (error) => reject(error);
      });
    };

    const handleCancelPreview = () => {
      previewVisible.value = false;
    };

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file);
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
    };

    function getBase64(file) {
      return new Promise((resolve, reject) => {
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });
    }

官方文档上没有写到如何同时满足手动上传和限制文件格式和大小并且实现预览，所以自己总结了一下。
文笔稚嫩，希望对你有所帮助。