지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Node의 파일 모듈에 대해 자세히 이야기해 보겠습니다.

青灯夜游
풀어 주다： 2023-04-25 19:44:16
앞으로
1623명이 탐색했습니다.

Node의 파일 모듈에 대해 자세히 이야기해 보겠습니다.

Stream/Buffer에 대해 이야기하는 동안 우리는 이미 require("fs")를 사용하여 일부 작업을 수행하는 파일 모듈을 소개하기 시작했습니다.require("fs")引入文件模块做一些操作了

文件模块是对底层文件操作的封装，例如文件读写/打开关闭/删除添加等等

文件模块最大的特点就是所有的方法都提供的同步和异步两个版本，具有 sync 后缀的方法都是同步方法，没有的都是异步方法

文件常识

文件权限

因为需要对文件进行操作，所以需要设置对应的权限。【相关教程推荐：nodejs视频教程、编程教学】

Node의 파일 모듈에 대해 자세히 이야기해 보겠습니다.

主要分为三种角色，文件所有者、文件所属组、其他用户

文件权限分为读、写、执行，分别于数字表示为4/2/1，没有权限的时候表示为0

如果取消了执行权限指，文件夹内任何文件都无法访问，也无法 cd 到文件夹

使用 Linux 命令ll

파일 모듈은 다음에서 작동합니다. 파일 읽기/쓰기/열기/닫기/삭제 추가 등의 캡슐화

Untitled 1.png파일 모듈의 가장 큰 특징은 모든 메소드가

동기

및

비동기

두 가지 버전으로 제공된다는 점입니다. 동기화 접미사는 모두 비동기 방법을 제외하고 모두 동기 방법입니다

파일 상식

파일 권한

Untitled 2.png

파일을 조작해야 하기 때문에 해당 권한 설정이 필요합니다. [권장 관련 튜토리얼: nodejs 동영상 튜토리얼

, 프로그래밍 교육】

Node의 파일 모듈에 대해 자세히 이야기해 보겠습니다.

주로 파일 소유자, 파일 소유자 그룹, 기타 사용자 3가지 역할로 나누어집니다

파일 권한은 읽기, 쓰기로 나뉩니다. , 실행은 각각 숫자로 4/2/1로 표현되며, 권한이 없을 경우 0으로 표시됩니다

실행 권한이 취소되면 폴더 안의 모든 파일에 접근할 수 없으며, CD도 불가능합니다. 폴더에

Linux 명령ll을 사용하면 해당 디렉터리에 있는 파일/폴더의 권한을 볼 수 있습니다

Untitled 3.png

Untitled 4.png첫 번째 d는 폴더를 나타내고 -는 파일을 나타내며 그 뒤에는 해당 폴더의 권한이 표시됩니다. file // TODO: @는 무엇을 의미합니까

Untitled 5.pngfile Identification

Node에서 식별 비트는 파일의 동작 방식을 나타내며 읽기/쓰기/읽기 및 쓰기 가능 등을 정렬하고 결합할 수 있습니다

File descriptor

in 이전 내용에서 언급했듯이 운영체제는 열려 있는 각 파일에 파일 설명자라는 숫자 식별자를 할당하고 이 값을 사용하여 특정 파일을 추적합니다.

파일 설명자는 일반적으로 3부터 시작하며, 0/1/2는 각각 표준 입력/표준 출력/오류 출력을 나타냅니다.

Common API

필터링 적절한 
const fs = require("fs");
const path = require("path");
const { promisify } = require("util");
const reg = new RegExp("(.ts[x]*|.js[x]*|.json)$");
const targetPath = path.resolve(__dirname, "../mini-proxy-mobx");

const readDir = (targetPath, callback) => {
    fs.readdir(targetPath, (err, files) => {
        if (err) callback(err);
        files.forEach(async (file) => {
            const filePath = path.resolve(__dirname, `${targetPath}/${file}`);
            const stats = await promisify(fs.stat)(filePath);
            if (stats.isDirectory()) {
                await readDir(filePath);
            } else {
                checkFile(filePath);
            }
        });
    });
};
const checkFile = (file) => {
    if (reg.test(file)) {
        console.log(file);
    }
};

readDir(targetPath, (err) => {
    throw err;
});
로그인 후 복사

파일 복사

문제: 파일 1의 내용을 파일 2

File API

fs.readFile을 사용하여 파일 내용을 읽을 수 있으며 그런 다음 fs.writeFile을 사용하여 새 파일을 작성하세요
const fs = require("fs");
const path = require("path");

const sourceFile = path.resolve(__dirname, "../doc/Mobx原理及丐版实现.md");
const targetFile = path.resolve(__dirname, "target.txt");

fs.readFile(sourceFile, (err, data) => {
    if (err) throw err;
    const dataStr = data.toString();
    fs.writeFile(targetFile, dataStr, (err) => {
        if (err) throw err;
        console.log("copy success~");
        process.exit(1);
    });
});
로그인 후 복사

혹시 문제가 있나요? Stream에서 말했듯이 비트 단위로 해야 합니다. 그렇지 않으면 파일이 커지면 메모리가 압도됩니다.

Untitled 6.png

Buffer 사용

fs.open 메소드를 사용하여 파일을 열고 파일 설명자를 얻은 다음 fs.read/fs.write 메소드를 호출하여 특정 위치에 특정 양의 데이터를 읽고 씁니다. 

const copyFile = (source, target, size, callback) => {
    const sourceFile = path.resolve(__dirname, source);
    const targetFile = path.resolve(__dirname, target);

    const buf = Buffer.alloc(size);
    let hasRead = 0; // 下次读取文件的位置
    let hasWrite = 0; // 下次写入文件的位置
    fs.open(sourceFile, "r", (err, sourceFd) => {
        if (err) callback(err);
        fs.open(targetFile, "w", (err, targetFd) => {
            if (err) throw callback(err);
            function next() {
                fs.read(sourceFd, buf, 0, size, hasRead, (err, bytesRead) => {
                    if (err) callback(err);
                    hasRead += bytesRead;
                    if (bytesRead) {
                        fs.write(targetFd, buf, 0, size, hasWrite, (err, bytesWrite) => {
                            if (err) callback(err);
                            hasWrite += bytesWrite;
                            next();
                        });
                        return;
                    }
                    fs.close(sourceFd, () => { console.log("关闭源文件"); });
                    fs.close(targetFd, () => { console.log("关闭目标文件"); });
                });
            }
            next();
        });
    });
};
로그인 후 복사
🎜 🎜스트림 사용 🎜🎜
const fs = require("fs");
const path = require("path");
const readStream = fs.createReadStream(
    path.resolve(__dirname, "../doc/Mobx原理及丐版实现.md")
);
const writeStream = fs.createWriteStream(path.resolve("target.txt"));
readStream.pipe(writeStream);
로그인 후 복사
🎜🎜파일 업로드🎜🎜🎜🎜소용량 파일 업로드🎜🎜
// 上传后资源的URL地址
const RESOURCE_URL = `http://localhost:${PORT}`;
// 存储上传文件的目录
const UPLOAD_DIR = path.join(__dirname, "../public");

const storage = multer.diskStorage({
    destination: async function (req, file, cb) {
        // 设置文件的存储目录
        cb(null, UPLOAD_DIR);
    },
    filename: function (req, file, cb) {
        // 设置文件名
        cb(null, `${file.originalname}`);
    },
});

const multerUpload = multer({ storage });

router.post(
    "/uploadSingle",
    async (ctx, next) => {
        try {
            await next();
            ctx.body = {
                code: 1,
                msg: "文件上传成功",
                url: `${RESOURCE_URL}/${ctx.file.originalname}`,
            };
        } catch (error) {
            console.log(error);
            ctx.body = {
                code: 0,
                msg: "文件上传失败",
            };
        }
    },
    multerUpload.single("file")
);
로그인 후 복사
🎜🎜대용량 파일 업로드🎜🎜🎜🎜🎜🎜🎜주요 단계🎜🎜
  1. 前端接收大文件，并进行切片处理
  2. 将每份切片进行上传处理
  3. 后端接收到所有的切片，存储所有切片到一个文件夹中
  4. 将文件夹中的切片做合并，并对切片做删除
  5. 再次上传统一文件时，能够快速上传

具体实现

  1. 前端切片

    const BIG_FILE_SIZE = 25 * 1024 * 1024;
const SLICE_FILE_SIZE = 5 * 1024 * 1024;

const uploadFile = async () => {
    if (!fileList?.length) return alert("请选择文件");
    const file = fileList[0];
    const shouldUpload = await verifyUpload(file.name);
    if (!shouldUpload) return message.success("文件已存在，上传成功");
    if (file.size > BIG_FILE_SIZE) {
        // big handle
        getSliceList(file);
    }
    // // normal handle
    // upload("/uploadSingle", file);
};
const getSliceList = (file: RcFile) => {
    const sliceList: ISlice[] = [];
    let curSize = 0;
    let index = 0;
    while (curSize < file.size) {
        sliceList.push({
            id: shortid.generate(),
            slice: new File(
                [file.slice(curSize, (curSize += SLICE_FILE_SIZE))],
                `${file.name}-${index}`
            ),
            name: file.name,
            sliceName: `${file.name}-${index}`,
            progress: 0,
        });
        index++;
    }
    uploadSlice(sliceList);
    setSliceList(sliceList);
};
    로그인 후 복사

    file 是一种特殊的 Blob 对象，可以使用 slice 进行大文件分割

    Untitled 7.png

  2. 上传切片

    const uploadSlice = async (sliceList: ISlice[]) => {
  const requestList = sliceList
      .map(({ slice, sliceName, name }: ISlice, index: number) => {
          const formData = new FormData();
          formData.append("slice", slice);
          formData.append("sliceName", sliceName);
          formData.append("name", name);
          return { formData, index, sliceName };
      })
      .map(({ formData }: { formData: FormData }, index: number) =>
          request.post("/uploadBig", formData, {
              onUploadProgress: (progressEvent: AxiosProgressEvent) =>
                  sliceUploadProgress(progressEvent, index),
          })
      );
  await Promise.all(requestList);
};
    로그인 후 복사

    根据切片构建每个切片的 formData，将二进制数据放在 slice 参数中，分别发送请求。

    onUploadProgress 来处理每个切片的上传进度

    // Client
const storage = multer.diskStorage({
  destination: async function (req, file, cb) {
      const name = file?.originalname.split(".")?.[0];
      const SLICE_DIR = path.join(UPLOAD_DIR, `${name}-slice`);
      if (!fs.existsSync(SLICE_DIR)) {
          await fs.mkdirSync(SLICE_DIR);
      }
      // 设置文件的存储目录
      cb(null, SLICE_DIR);
  },
  filename: async function (req, file, cb) {
      // 设置文件名
      cb(null, `${file?.originalname}`);
  },
});

// Server
router.post(
    "/uploadBig",
    async (ctx, next) => {
        try {
            await next();
            const slice = ctx.files.slice[0]; // 切片文件
            ctx.body = {
                code: 1,
                msg: "文件上传成功",
                url: `${RESOURCE_URL}/${slice.originalname}`,
            };
        } catch (error) {
            ctx.body = {
                code: 0,
                msg: "文件上传失败",
            };
        }
    },
    multerUpload.fields([{ name: "slice" }])
);
    로그인 후 복사

  3. 切片合并

    当我们所有的切片上传成功之后，我们依旧希望是按着原始文件作为保存的，所以需要对切片进行合并操作

    // Client
const uploadSlice = async (sliceList: ISlice[]) => {
		// ...和上述 uploadSlice 一致
		mergeSlice();
};

const mergeSlice = () => {
    request.post("/mergeSlice", {
        size: SLICE_FILE_SIZE,
        name: fileList[0].name,
    });
};

// Server
router.post("/mergeSlice", async (ctx, next) => {
    try {
        await next();
        const { size, name } = ctx.request.body ?? {};
        const sliceName = name.split(".")?.[0];
        const filePath = path.join(UPLOAD_DIR, name);
        const slice_dir = path.join(UPLOAD_DIR, `${sliceName}-slice`);
        await mergeSlice(filePath, slice_dir, size);
        ctx.body = {
            code: 1,
            msg: "文件合并成功",
        };
    } catch (error) {
        ctx.body = {
            code: 0,
            msg: "文件合并失败",
        };
    }
});

// 通过 stream 来读写数据，将 slice 中数据读取到文件中
const pipeStream = (path, writeStream) => {
    return new Promise((resolve) => {
        const readStream = fs.createReadStream(path);
        readStream.on("end", () => {
            fs.unlinkSync(path);   // 读取完成之后，删除切片文件
            resolve();
        });
        readStream.pipe(writeStream);
    });
};

const mergeSlice = async (filePath, sliceDir, size) => {
    if (!fs.existsSync(sliceDir)) {
        throw new Error("当前文件不存在");
    }
    const slices = await fs.readdirSync(sliceDir);
    slices.sort((a, b) => a.split("-")[1] - b.split("-")[1]);
    try {
        const slicesPipe = slices.map((sliceName, index) => {
            return pipeStream(
                path.resolve(sliceDir, sliceName),
                fs.createWriteStream(filePath, { start: index * size })
            );
        });
        await Promise.all(slicesPipe);
        await fs.rmdirSync(sliceDir);  // 读取完成之后，删除切片文件夹
    } catch (error) {
        console.log(error);
    }
};
    로그인 후 복사

  4. 上传文件校验

    当我们上传一个文件的时候，先去判断在服务器上是否存在该文件，如果存在则直接不做上传操作，否则按上述逻辑进行上传

    // Client
const verifyUpload = async (name: string) => {
    const res = await request.post("/verify", { name });
    return res?.data?.data;
};

const uploadFile = async () => {
    if (!fileList?.length) return alert("请选择文件");
    const file = fileList[0];
    const shouldUpload = await verifyUpload(file.name);
    if (!shouldUpload) return message.success("文件已存在，上传成功");
    if (file.size > BIG_FILE_SIZE) {
        // big handle
        getSliceList(file);
    }
    // // normal handle
    // upload("/uploadSingle", file);
};

// Server
router.post("/verify", async (ctx, next) => {
    try {
        await next();
        const { name } = ctx.request.body ?? {};
        const filePath = path.resolve(UPLOAD_DIR, name);
        if (fs.existsSync(filePath)) {
            ctx.body = {
                code: 1,
                data: false,
            };
        } else {
            ctx.body = {
                code: 1,
                data: true,
            };
        }
    } catch (error) {
        ctx.body = {
            code: 0,
            msg: "检测失败",
        };
    }
});
    로그인 후 복사

    上述直接使用文件名来做判断，过于绝对，对文件做了相关修改并不更改名字，就会出现问题。更应该采用的方案是根据文件相关的元数据计算出它的 hash 值来做判断。

    const calculateMD5 = (file: any) => new Promise((resolve, reject) => {
    const chunkSize = SLICE_FILE_SIZE
    const fileReader = new FileReader();
    const spark = new SparkMD5.ArrayBuffer();
    let cursor = 0;
    fileReader.onerror = () => {
        reject(new Error(&#39;Error reading file&#39;));
    };
    fileReader.onload = (e: any) => {
        spark.append(e.target.result);
        cursor += e.target.result.byteLength;
        if (cursor < file.size) loadNext();
        else resolve(spark.end());
        
    };
    const loadNext = () => {
        const fileSlice = file.slice(cursor, cursor + chunkSize);
        fileReader.readAsArrayBuffer(fileSlice);
    }
    loadNext();
});
    로그인 후 복사

    本文所有的代码可以github上查看

    总结

    本文从文件常识/常用的文件 API 入手，重点讲解了 Node 中 File 的相关实践，最后使用相关内容实现了大文件上传。

    更多node相关知识，请访问：nodejs 教程！

    위 내용은 Node의 파일 모듈에 대해 자세히 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
前端 node.js
원천：juejin.cn
이전 기사：React의 커스텀 Hook에 대한 심층적인 이해 다음 기사：JavaScript의 클로저에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
Axios 및 Node.js를 사용하여 PokeAPI에서 특정 통계(Stats)를 가져오는 데 문제가 있습니다. 문제가 있습니다. PokemonAPI를 사용하려고 하는데 공격, HP, 속도 통계에 액세스하려고 하면 모든 포켓몬에 대해 정의되지 않은 것으로 표시됩니다! API...
에서 2024-04-06 18:46:35
0
1
464
MERN 스택 검색 상자 및 확인란에 대한 정규식 필터 MERN 스택이 학습을 통해 함께 작동하는 방식을 이해하려고 노력하고 있으며 bezcoder의 다음 튜토리얼을 따르고 있습니다. Node.js/Express/Mo...
에서 2024-04-06 14:53:12
0
1
425
Node.js: SQL 쿼리 결과를 배열에 저장할 수 없습니다. SQL 쿼리 결과를 배열로 푸시하려고 합니다. 그러나 작동하지 않는 것 같습니다. 온라인에서 해결책을 찾을 수 없습니다. 누구든지 이 문제를 해결하는 데 도움을 ...
에서 2024-04-06 14:14:46
0
1
373
npx create-react-app 명령에 오류가 있습니다. 어떻게 해결합니까? 'npxcreate-react-app' 명령을 사용하여 새 React 앱을 만들려고 했지만 제대로 작동하지 않는 것 같습니다. 최근에 이 문제를 겪은 사람이 있나...
에서 2024-04-05 14:42:18
0
1
3511
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿