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

本文详细介绍了在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);
      });
    }

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值