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

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

Logo

前往低代码交流专区

更多推荐