在聊天Stream/Buffer 的時(shí)候，我們已經(jīng)開始使用require("fs")引入文件模組做一些操作了

文件模組是對(duì)底層文件操作的封裝，例如文件讀寫/打開關(guān)閉/刪除添加等等

文件模組最大的特點(diǎn)就是所有的方法都提供的同步和非同步兩個(gè)版本，具有sync 後綴的方法都是同步方法，沒有的都是非同步方法

##檔案常識(shí)

檔案權(quán)限

因?yàn)樾枰獙?duì)檔案進(jìn)行操作，所以需要設(shè)定對(duì)應(yīng)的權(quán)限。 【相關(guān)教學(xué)推薦：

nodejs影片教學(xué)、程式設(shè)計(jì)教學(xué)】

#主要分為三種角色，檔案擁有者、文件所屬群組、其他使用者

檔案權(quán)限分為讀取、寫入、執(zhí)行，分別於數(shù)字表示為4/2/1，沒有權(quán)限的時(shí)候表示為0

如果取消了執(zhí)行權(quán)限指，資料夾內(nèi)任何檔案都無法訪問，也無法cd 到資料夾

使用Linux 指令

ll能夠查看目錄中檔案/資料夾的權(quán)限

第一位d 代表資料夾，- 表示文件，後面就是文件的權(quán)限?// TODO: @表示什麼

檔案識(shí)別

在Node 中，標(biāo)識(shí)位代表著對(duì)檔案的操作方式，可讀/可寫/即可讀又可寫等等，可以進(jìn)行排列組合

#檔案描述子

在先前的內(nèi)容中講過，作業(yè)系統(tǒng)會(huì)為每個(gè)開啟的檔案指派一個(gè)叫做檔案描述子的數(shù)值標(biāo)識(shí)，使用這些數(shù)值來追蹤特定的文件。

檔案描述子一般從3開始，0/1/2分別代表標(biāo)準(zhǔn)輸入/標(biāo)準(zhǔn)輸出/錯(cuò)誤輸出

常用API

一些實(shí)作

##過濾專案中適當(dāng)?shù)臋n案

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中的內(nèi)容拷貝到檔案2中

檔案API

可以用fs.readFile 把檔案內(nèi)容讀取完成，再採(cǎi)用fs.writeFile 寫入新的檔案

const fs = require("fs");
const path = require("path");

const sourceFile = path.resolve(__dirname, "../doc/Mobx原理及丐版實(shí)現(xiàn).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);
    });
});

? 這樣是否有問題，我們?cè)赟tream 講過，需要一點(diǎn)一點(diǎn)來，否則在大檔案時(shí)內(nèi)存吃不消。

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("關(guān)閉源文件"); });
                    fs.close(targetFd, () => { console.log("關(guān)閉目標(biāo)文件"); });
                });
            }
            next();
        });
    });
};

Stream 使用

const fs = require("fs");
const path = require("path");
const readStream = fs.createReadStream(
    path.resolve(__dirname, "../doc/Mobx原理及丐版實(shí)現(xiàn).md")
);
const writeStream = fs.createWriteStream(path.resolve("target.txt"));
readStream.pipe(writeStream);

#檔案上傳

小檔案上傳

// 上傳后資源的URL地址
const RESOURCE_URL = `http://localhost:${PORT}`;
// 存儲(chǔ)上傳文件的目錄
const UPLOAD_DIR = path.join(__dirname, "../public");

const storage = multer.diskStorage({
    destination: async function (req, file, cb) {
        // 設(shè)置文件的存儲(chǔ)目錄
        cb(null, UPLOAD_DIR);
    },
    filename: function (req, file, cb) {
        // 設(shè)置文件名
        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. 前端接收大文件，并進(jìn)行切片處理
2. 將每份切片進(jìn)行上傳處理
3. 后端接收到所有的切片，存儲(chǔ)所有切片到一個(gè)文件夾中
4. 將文件夾中的切片做合并，并對(duì)切片做刪除
5. 再次上傳統(tǒng)一文件時(shí)，能夠快速上傳

具體實(shí)現(xiàn)

1. 前端切片

   const BIG_FILE_SIZE = 25 * 1024 * 1024;
   const SLICE_FILE_SIZE = 5 * 1024 * 1024;
   
   const uploadFile = async () => {
       if (!fileList?.length) return alert("請(qǐng)選擇文件");
       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 對(duì)象，可以使用 slice 進(jìn)行大文件分割

   

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

   根據(jù)切片構(gòu)建每個(gè)切片的 formData，將二進(jìn)制數(shù)據(jù)放在 slice 參數(shù)中，分別發(fā)送請(qǐng)求。

   onUploadProgress 來處理每個(gè)切片的上傳進(jìn)度

   // 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);
         }
         // 設(shè)置文件的存儲(chǔ)目錄
         cb(null, SLICE_DIR);
     },
     filename: async function (req, file, cb) {
         // 設(shè)置文件名
         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. 切片合并

   當(dāng)我們所有的切片上傳成功之后，我們依舊希望是按著原始文件作為保存的，所以需要對(duì)切片進(jìn)行合并操作

   // 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 來讀寫數(shù)據(jù)，將 slice 中數(shù)據(jù)讀取到文件中
   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("當(dāng)前文件不存在");
       }
       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. 上傳文件校驗(yàn)

   當(dāng)我們上傳一個(gè)文件的時(shí)候，先去判斷在服務(wù)器上是否存在該文件，如果存在則直接不做上傳操作，否則按上述邏輯進(jìn)行上傳

   // 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("請(qǐng)選擇文件");
       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: "檢測(cè)失敗",
           };
       }
   });

   上述直接使用文件名來做判斷，過于絕對(duì)，對(duì)文件做了相關(guān)修改并不更改名字，就會(huì)出現(xiàn)問題。更應(yīng)該采用的方案是根據(jù)文件相關(guān)的元數(shù)據(jù)計(jì)算出它的 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('Error reading file'));
       };
       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上查看

   總結(jié)

   本文從文件常識(shí)/常用的文件 API 入手，重點(diǎn)講解了 Node 中 File 的相關(guān)實(shí)踐，最后使用相關(guān)內(nèi)容實(shí)現(xiàn)了大文件上傳。

   更多node相關(guān)知識(shí)，請(qǐng)?jiān)L問：nodejs 教程！

   以上是深入聊聊Node中的File模組的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！