原生input 文件上传

<template>
  <div>
    <input type="file" @change="handleFileInput" ref="fileInput">
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileInput = ref(null);

    const handleFileInput = () => {
      const files = fileInput.value.files;
      if (files.length > 0) {
        const FILE_SIZE_LIMIT = 1024 * 1024 * 1024; // 1GB
        const fileSize = files[0].size;
        if (fileSize > FILE_SIZE_LIMIT) {
          alert('上传的文件大小不能超过 1GB');
          fileInput.value.value = null; // 清空选择的文件
          return;
        }
        // 文件大小符合要求，进行其他操作
        // ...
      }
    };

    return {
      fileInput,
      handleFileInput,
    };
  },
};
</script>

通过 ref 获取 <input> 元素的引用，然后在事件处理函数 handleFileInput() 中访问 files 属性获取选取的文件对象。接着，我们定义一个 FILE_SIZE_LIMIT 常量来设置文件大小限制（单位为 byte），并通过 if 判断语句进行检查，如果文件大小超过限制，则给出错误提示信息并清空选择的文件。