WebApp을 개발할 때 서버에 파일 업로드, 로컬에 파일 다운로드, 파일 캐싱 등과 같은 파일 관련 작업이 발생할 수 있습니다. 다음은 여러 가지 방법을 소개합니다. 파일을 처리합니다.

태그 기반 업로드 및 다운로드

파일을 업로드하는 가장 일반적인 방법은 입력 태그를 사용하는 것입니다. 입력 태그의 type="file"을 설정하면 사용자가 업로드할 파일을 로컬에서 선택할 수 있습니다.

function InputFile() {
    const [file, setFile] = useState(null);
    const handleChange = (e: React.ChangeEvent) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setFile(file);
  };
    return 
}

파일 액세스 API

파일 시스템 액세스 API(파일 시스템 액세스 API)는 파일 시스템 API의 일부로 API를 사용하여 사용자 작업에 따라 파일을 읽고 쓸 수 있습니다.

파일 작업에 이 API를 사용할 때 다음 인터페이스가 사용됩니다.

• showOpenFilePicker: 파일 선택기를 표시하고 사용자가 하나 이상의 파일을 선택한 다음 해당 파일에 대한 핸들을 반환할 수 있도록 하는 데 사용됩니다.

export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return Click
}

• showSaveFilePicker: 파일 선택기를 표시하고 사용자가 파일을 저장할 수 있도록 하는 데 사용됩니다(새 파일을 덮어쓰거나 생성).

export function PickerFS() {
    const handleChooseFile = async () => {
    const directoryHandle = await window.showDirectoryPicker();
    const keys = directoryHandle.keys();
    // 打印该目录下所有文件的名字
    for await (const key of keys) {
      console.log(key);
    }
  };
  return Click
}

• showDirectoryPicker: 디렉터리 선택기를 표시하고 사용자가 디렉터리를 선택할 수 있도록 하는 데 사용됩니다.

export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleDownloadFile= async () => {
    const opts = {
      suggestedName: "test.txt",
      types: [
        {
          description: "Text file",
          accept: { "text/plain": [".txt"] },
        },
      ],
    };

    const fileHandle = await window.showSaveFilePicker(opts);
    const writable = await fileHandle.createWritable();
    await writable.write("Hello, world!");
    await writable.close();
  };
  return Click
}

소스 개인 파일 시스템

원본 개인 파일 시스템은 위의 파일 액세스 시스템과 유사하며 파일 시스템 API의 일부이지만 가장 직접적인 차이점은 사용자에게 표시되는지 여부입니다. showXXX 인터페이스는 모두 파일(디렉토리) 선택기를 열어야 하며 사용자는 파일(디렉토리)을 적극적으로 선택해야 합니다. 저장된 파일도 사용자가 지정한 경로에 저장해야 하지만 소스 비공개 상호 작용은 파일 시스템은 사용자에게 보이지 않으며 저장된 파일은 가공된 데이터이므로 원본 데이터를 사용자가 볼 수 없습니다.

export function OpFs() {
  const handleChooseFile = async (event: React.ChangeEvent) => {
    const fileList = event.target.files;
    const file = fileList && fileList[0];
    if (!file) return;

    const opfsRoot = await navigator.storage.getDi rectory();
    const fileHandle = await opfsRoot.getFileHandle(file.name, { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write(file);
    await writable.close();
  };

  return ;
}

await navigator.storage.getDirectory()는 사용자 로컬 파일 시스템의 루트 디렉터리를 나타내는 파일 핸들을 반환한 다음 getFileHandle을 통해 지정된 파일의 핸들을 가져옵니다. 존재하는 경우 하나를 만든 다음 createWritable을 사용합니다. 쓰기 가능한 스트림을 만듭니다. 개발자는 이 쓰기 가능한 스트림을 통해 지정된 파일에 데이터를 쓰고 마지막으로 쓰기 가능한 스트림을 닫을 수 있습니다.

주의할 점

? 파일 액세스 시스템은 사용 중인 소스 파일 시스템과 매우 유사합니다. 특정 파일이나 디렉터리에 액세스하려면 파일 핸들(FileSystemFileHandle) 또는 폴더 핸들(FileSystemDirectoryHandle)이 필요합니다.

핸들은 파일 자체에 대한 래퍼로 이해될 수 있으며 핸들의 인터페이스를 통해 파일을 읽고(getFile) 쓰고(createWritable) 있습니다.

보다

• https://web.dev/articles/origin-private-file-system?hl=zh-cn#specials_of_the_origin_private_file_system
• https://developer.chrome.com/docs/capability/web-apis/file-system-access?hl=zh-cn
• https://gine.me/posts/70f8e931bc17426fb54127948bcf4a0e
• https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/