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

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

2.代码如下

		
            
              
 // 上传一张图片后隐藏上传按钮
                
              
            
            
              
            
 		

方法部分：

 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);
      });
    }

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