nodejs實(shí)現(xiàn)文件或文件夾上傳功能的代碼示例

更新時(shí)間：2023年08月23日 09:49:40 作者：洞窩技術(shù)

在平常的工作中,經(jīng)常會(huì)遇到需要將本地項(xiàng)目文件同步到遠(yuǎn)端服務(wù)器的情況,所以每次遇到都需要考慮如何將文件上傳到服務(wù)器上,所以本文就給大家介紹一下nodejs實(shí)現(xiàn)文件或文件夾上傳功能,需要的朋友可以參考下

背景

在平常的工作中，經(jīng)常會(huì)遇到需要將本地項(xiàng)目文件同步到遠(yuǎn)端服務(wù)器的情況，所以每次遇到都需要考慮如何將文件上傳到服務(wù)器上。我使用的系統(tǒng)不一樣，就需要考慮使用不同的上傳方式。

雖然現(xiàn)在有很多文件上傳的工具，不過有些庫依賴系統(tǒng)，如rsync或scp這種庫一般在linux環(huán)境中使用，有些庫需要依賴安裝客戶端和服務(wù)端，如ftp。作為一個(gè)開發(fā)人員，要有折騰的精神，所以我決定寫一個(gè)基于web的文件上傳工具，方便不同系統(tǒng)環(huán)境中可以輕松地實(shí)現(xiàn)文件上傳。

把這個(gè)工具封裝成一個(gè)npm庫，并通過執(zhí)行一個(gè)簡單的命令來實(shí)現(xiàn)將本地文件上傳到遠(yuǎn)端服務(wù)器的功能。

http上傳文件實(shí)現(xiàn)原理

使用原生http庫是實(shí)現(xiàn)文件上傳最簡單直接的方式，大概分為以下幾個(gè)步驟：

創(chuàng)建http服務(wù)器，監(jiān)聽客戶端請(qǐng)求；
解析http請(qǐng)求，獲取上傳文件的相關(guān)信息，如文件名、文件大小等；
創(chuàng)建一個(gè)可寫流，將接收到的文件數(shù)據(jù)寫入到服務(wù)器的臨時(shí)文件中；
監(jiān)聽文件寫入完成事件，將臨時(shí)文件移動(dòng)到指定的目錄，完成上傳；

本文主要使用兩種方式實(shí)現(xiàn)上傳，一種是multipart/form-data類型，這種方式支持?jǐn)y帶文件元數(shù)據(jù)。另一種是application/octet-stream，只傳輸純粹的二進(jìn)制數(shù)據(jù)，不對(duì)數(shù)據(jù)進(jìn)行處理，這兩種都可以實(shí)現(xiàn)文件上傳。

使用表單實(shí)現(xiàn)上傳

當(dāng)我們使用POST方式的表單向服務(wù)器發(fā)送HTTP請(qǐng)求時(shí)，表單的參數(shù)會(huì)被寫入到HTTP請(qǐng)求的BODY中，根據(jù)不同的contentType，body中存放的數(shù)據(jù)格式也不相同。

本文主要使用了multipar

text/plain

這種請(qǐng)求體類型是最簡單的一種，傳輸純文本數(shù)據(jù)，請(qǐng)求體中的數(shù)據(jù)以純文本形式進(jìn)行編碼，沒有鍵值對(duì)的結(jié)構(gòu)。適用于簡單的文本數(shù)據(jù)傳輸，如純文本文件或簡單的文本消息。如以下代碼，請(qǐng)求到服務(wù)器端時(shí)，請(qǐng)求體內(nèi)是一段文本。

fetch('http://127.0.0.1:3000/submit', {
    headers: {
        content-type: 'text/plain',
        body: '我只是一段文本'
    }
})

application/x-www-form-urlencoded

這種請(qǐng)求體類型是最常見的，用于傳輸表單數(shù)據(jù)。請(qǐng)求體中的數(shù)據(jù)以鍵值對(duì)的形式進(jìn)行編碼，每個(gè)鍵值對(duì)之間使用"&"符號(hào)分隔，鍵和值之間使用"="符號(hào)分隔。適用于傳輸簡單的表單數(shù)據(jù)，如登錄表單、搜索表單等。

fetch('http://127.0.0.1:3000/submit', {
    headers: {
        content-type: 'application/x-www-form-urlencoded',
        body: 'username=admin&password=123456'
    }
})

multipart/form-data

這種請(qǐng)求體類型用于上傳文件或傳輸復(fù)雜的表單數(shù)據(jù)。請(qǐng)求體中的數(shù)據(jù)以多個(gè)部分（part）的形式進(jìn)行編碼，每個(gè)部分之間使用boundary進(jìn)行分隔。每個(gè)部分由一個(gè)頭部和一個(gè)數(shù)據(jù)部分組成，頭部包含了部分的元數(shù)據(jù)信息，數(shù)據(jù)部分則包含了具體的數(shù)據(jù)。適用于上傳文件或包含文件的表單數(shù)據(jù)。

在發(fā)起請(qǐng)求時(shí)，content-Type中會(huì)創(chuàng)建一個(gè)隨機(jī)數(shù)字串作為內(nèi)容之間的分隔符，以下為一個(gè)請(qǐng)求頭示例：

Content-Type: multipart/form-data; boundary=--------------------------585592033508456553585598

請(qǐng)求體內(nèi)容類似以下方式：

----------------------585592033508456553585598
Conent-Disposition: form-data; name="username"
admin
----------------------585592033508456553585598
Conent-Disposition: form-data; name="password"
123456
----------------------585592033508456553585598
Conent-Disposition: form-data; name=""; filename="hw.txt"
Content-type: text/plain
hello world!
----------------------585592033508456553585598
Conent-Disposition: form-data; name=""; filename="avatar.png"
Content-type: image/png
?PNG
[圖片數(shù)據(jù)]

每個(gè)片段都是以Content-Type中的隨機(jī)串做分隔，每個(gè)片段都可以指定自己不同的文件類型。比如上面的示例中就包含了文本文件，圖片，表單字段。

使用數(shù)據(jù)流上傳

發(fā)送請(qǐng)求時(shí)，將Content-Type設(shè)置成”application/octet-stream“，這是一種通用的二進(jìn)制數(shù)據(jù)傳輸格式，它不對(duì)數(shù)據(jù)進(jìn)行特殊處理或解析。通常用于傳輸不可見字符、二進(jìn)制文件或未知類型的數(shù)據(jù)。進(jìn)行傳輸時(shí)，數(shù)據(jù)會(huì)被視為純粹的二進(jìn)制流，沒有特定的結(jié)構(gòu)或格式。這種方式不支持在請(qǐng)求體中攜帶文件的元數(shù)據(jù)，僅僅是將文件內(nèi)容作為二進(jìn)制數(shù)據(jù)傳輸。

實(shí)現(xiàn)功能

文件上傳npm庫，可以在服務(wù)器端使用nodejs快速啟動(dòng)一個(gè)web服務(wù)，將本地文件上傳到服務(wù)器，可以跨平臺(tái)使用。命令行參數(shù)格式與 scp 上傳文件的方式一樣。不過未實(shí)現(xiàn)將服務(wù)器文件同步到本地的能力。。。

啟動(dòng)web服務(wù)器

使用以下命令快速創(chuàng)建一個(gè)web服務(wù)， ip 監(jiān)聽的地址默認(rèn)為'0.0.0.0'， port 監(jiān)聽的端口號(hào)，默認(rèn)為3000.

dwsync server [ip] [port]

上傳文件

使用以下命令上傳文件到服務(wù)器。 -t : 設(shè)置連接服務(wù)器的類型， http | ftp ，默認(rèn)值： http ； 本地路徑 : 要上傳的本地文件路徑； 用戶名 : 連接ftp服務(wù)時(shí)需要； 域名 : 服務(wù)器地址； 端口 : 服務(wù)器端口； 服務(wù)器路徑 : 要保存的服務(wù)器路徑，連接服務(wù)器類型是http服務(wù)時(shí)，傳入服務(wù)器絕對(duì)路徑；連接服務(wù)器類型是ftp時(shí)，傳入為相對(duì)路徑；

dwsync [-t http|ftp] <本地路徑> 用戶名@域名:端口:<服務(wù)器路徑>

連接服務(wù)器類型為ftp時(shí)，執(zhí)行命令后，會(huì)顯示輸入密碼框：如下圖所示：

lQDPJwnJgYzUWUjMmM0FXrD9yybYYYMgFATYZZoCgPEA_1374_152

實(shí)現(xiàn)方式

主要包含三部分內(nèi)容，在服務(wù)器端啟動(dòng)一個(gè)web服務(wù)器，用來接收請(qǐng)求并處理。在客戶端執(zhí)行命令請(qǐng)求指定服務(wù)器接口，將本地文件傳輸?shù)椒?wù)器上。如果服務(wù)器端有ftp服務(wù)器，那么可以直接在本地連接ftp服務(wù)器上傳文件。

http服務(wù)器

服務(wù)器端是運(yùn)行在服務(wù)器上的一個(gè)web服務(wù)，這個(gè)web服務(wù)提供三個(gè)接口能力。

創(chuàng)建目錄

判斷當(dāng)前服務(wù)器上是否存在當(dāng)前目錄，如果不存在些創(chuàng)建目錄，并通知客戶端。創(chuàng)建成功或者目錄已存在，則發(fā)送響應(yīng)”1“，如果創(chuàng)建目錄失敗，則返回”0“，并中止上傳。以下為代碼實(shí)現(xiàn)：

function handleCreateDir(req, res) {
  let body = '';
  req.on('data', (chunk) => {
    body += chunk;
  });
  req.on('end', () => {
    try {
      // 由于在請(qǐng)求時(shí)，設(shè)置了Content-Type為application/json，所以這里需要解析一下JSON格式。
      const filepath = JSON.parse(body);
      if (fs.existsSync(filepath)) {
        logger.info(`Directory already exists: ${filepath}`);
        res.end('1');
        return;
      }
      fs.mkdir(filepath, (err) => {
        if (err) {
          logger.error('Error create dir:', err);
          res.statusCode = 500;
          res.end('0');
        } else {
          logger.info(`Directory created: ${filepath}`);
          res.end('1');
        }
      });
    } catch (error) {
      logger.error('Error create dir:', error);
      res.statusCode = 500;
      res.end('0');
    }
  });
}

上傳文件

需要兩個(gè)參數(shù)，remoteFilePath用來告訴服務(wù)器我要保存到服務(wù)器的路徑。file是上傳的文件內(nèi)容。

上傳文件使用了第三方庫 formidable 中的IncomingForm類來解析傳入的請(qǐng)求并獲取上傳的文件。

啟動(dòng)web服務(wù)時(shí)，會(huì)設(shè)置一個(gè)臨時(shí)目錄，用來保存上傳到服務(wù)器的文件，上傳完成后，會(huì)根據(jù)傳入的服務(wù)器路徑字段，將文件移動(dòng)到對(duì)應(yīng)服務(wù)器指定文件夾下。

具體實(shí)現(xiàn)代碼如下：

function handleFileUpload(req, res) {
  const form = new IncomingForm({ allowEmptyFiles: true, minFileSize: 0 });
  form.uploadDir = cacheDir;
  form.parse(req, (err, fields, files) => {
    let { remoteFilePath } = fields;
    remoteFilePath =
      remoteFilePath && remoteFilePath.length > 0
        ? remoteFilePath[0]
        : remoteFilePath;
    if (err) {
      logger.error('Error parsing form:', err);
      res.statusCode = 500;
      res.end('Internal Server Error');
    } else {
      let uploadedFile;
      if (files.file && Array.isArray(files.file)) {
        uploadedFile = files.file[0];
      } else {
        logger.error('no file');
        res.statusCode = 500;
        res.end('Internal Server Error');
        return;
      }
      fs.rename(uploadedFile.filepath, remoteFilePath, (err) => {
        if (err) {
          logger.error('Error renaming file:', err);
          res.statusCode = 500;
          res.end('Internal Server Error');
        } else {
          logger.info(`File saved: ${remoteFilePath}`);
          res.end('Upload complete');
        }
      });
    }
  });
}

上傳大文件

一般情況下，web服務(wù)對(duì)上傳的文件大小是有限制的，所以一些特別大的文件我們就需要做分片上傳，在這個(gè)工具中，對(duì)大文件的處理我使用了上傳二進(jìn)制的方式。

上傳二進(jìn)制數(shù)據(jù)時(shí)，會(huì)把文件信息封裝到header頭里，在header里設(shè)置了 fileSize是文件的總字節(jié)數(shù)，startByte是本次上傳的起始下標(biāo)，endByte是本次上傳的結(jié)束下標(biāo)。使用fs.createWriteStream創(chuàng)建一個(gè)追加的寫入流，將數(shù)據(jù)塊寫入指定的RemoteFilePath。監(jiān)聽請(qǐng)求對(duì)象上的數(shù)據(jù)事件并將接收到的數(shù)據(jù)寫入文件。當(dāng)請(qǐng)求數(shù)據(jù)獲取完畢后，判斷是否文件的總字節(jié)流與本次的結(jié)束下標(biāo)是否一致，如果一致則發(fā)送文件上傳成功的響應(yīng)，否則發(fā)送分片上傳成功響應(yīng)。

代碼實(shí)現(xiàn)：

function handleChunkFileUpload(req, res) {
  const remoteFilePath = decodeURIComponent(req.headers['remote-file-path']);
  const fileDir = path.dirname(remoteFilePath);
  if (!fs.existsSync(fileDir)) {
    fs.mkdirSync(fileDir);
  }
  const fileSize = parseInt(req.headers['file-size']);
  const startByte = parseInt(req.headers['start-byte']);
  const endByte = parseInt(req.headers['end-byte']);
  const writableStream = fs.createWriteStream(remoteFilePath, {
    flags: 'a',
    start: startByte,
  });
  req.on('data', (data) => {
    writableStream.write(data);
  });
  req.on('end', () => {
    writableStream.end();
    if (endByte === fileSize - 1) {
      logger.info(`File saved: ${remoteFilePath}`);
      res.end('File uploaded successfully');
    } else {
      res.end('Chunk uploaded successfully');
    }
  });
}

http上傳客戶端實(shí)現(xiàn)

http客戶端上傳使用第三方庫axios實(shí)現(xiàn)上傳功能，使用form-data庫創(chuàng)建表單對(duì)象。

要上傳文件到服務(wù)器，我們需要知道以下信息：

要上傳到的服務(wù)器地址
本地文件路徑
要上傳的服務(wù)器路徑

遍歷本地文件

首先我們使用 fs.statSync 方法檢查本地路徑是目錄還是文件。如果是一個(gè)文件，則請(qǐng)求上傳文件接口。如果是目錄則會(huì)遍歷文件夾內(nèi)所有的文件，遞歸調(diào)用upload方法處理。

// 遞歸上傳文件或文件夾
async upload(filePath, remoteFilePath) {
    const stats = fs.statSync(filePath);
    if (stats.isFile()) {
        //...
    } else if (stats.isDirectory()) {
        //...
    }
}

當(dāng)上傳的是文件并且文件大小超過200MB時(shí)，會(huì)使用大文件上傳接口通過上傳二進(jìn)制數(shù)據(jù)流的方式分片上傳文件。如果文件小于200MB，則使用form-data方式上傳文件到服務(wù)器。

// 遞歸上傳文件或文件夾
async upload(filePath, remoteFilePath) {
    const stats = fs.statSync(filePath);
    if (stats.isFile()) {
      if (stats.size > this.maxChunkSize) {
        await this.uploadChunkFile(filePath, remoteFilePath, stats.size);
      } else {
        await this.uploadFile(filePath, remoteFilePath);
      }
    } else if (stats.isDirectory()) {
        //...
    }
}

本地路徑是目錄時(shí)，首先會(huì)請(qǐng)求服務(wù)器端的 http://127.0.0.1:3000/mkdir 方法，確保當(dāng)前傳入的 remoteFilePath 路徑已經(jīng)在服務(wù)器上創(chuàng)建。接口返回 1 之后，遍歷當(dāng)前本地目錄，生成對(duì)應(yīng)的服務(wù)器文件路徑，遞歸調(diào)用自身，繼續(xù)下次遍歷。

try {
// 在服務(wù)器創(chuàng)建目錄
const response = await axios.post(
  `${this.protocol}://${this.host}:${this.port}/mkdir`,
  remoteFilePath,
  {
    headers: { 'Content-Type': 'application/json' },
  }
);
// 創(chuàng)建成功
if (response.data === 1) {
  // 讀取本地文件列表
  const list = fs.readdirSync(filePath);
  for (let index = 0; index < list.length; index++) {
    const file = list[index];
    const childFilePath = path.join(filePath, file);
    // 拼接服務(wù)器路徑
    const childRemoteFilePath = path.join(remoteFilePath, file);
    // 遞歸調(diào)用
    await this.upload(childFilePath, childRemoteFilePath);
  }
} else {
  console.error(`創(chuàng)建遠(yuǎn)程文件夾失敗: ${remoteFilePath}`);
  return;
}
} catch (error) {
console.error(`創(chuàng)建遠(yuǎn)程文件夾失敗: ${remoteFilePath}`);
console.error(error.message);
return;
}

文件上傳功能

文件上傳使用第三方庫 form-data 創(chuàng)建表單數(shù)據(jù)對(duì)象，并將服務(wù)器地址 remoteFilePath 當(dāng)前參數(shù)傳遞到服務(wù)器。

async uploadFile(filePath, remoteFilePath) {
    const formData = new FormData();
    formData.append('remoteFilePath', remoteFilePath);
    formData.append('file', fs.createReadStream(filePath));
    const progressBar = new ProgressBar(
      `Uploading ${filePath} [:bar] :percent`,
      {
        total: fs.statSync(filePath).size,
        width: 40,
        complete: '=',
        incomplete: ' ',
      }
    );
    const response = await axios.post(
      `${this.protocol}://${this.host}:${this.port}/upload`,
      formData,
      {
        headers: formData.getHeaders(),
        onUploadProgress: (progressEvent) => {
          progressBar.tick(progressEvent.loaded);
        },
      }
    );
    console.log(`Upload complete: ${response.data}`);
}

大文件上傳

大文件上傳使用二進(jìn)制數(shù)據(jù)流發(fā)送到服務(wù)器端，使用文件大小除以最大限制值獲取需要發(fā)起請(qǐng)求的數(shù)量，依次發(fā)送到服務(wù)器端。

const totalChunks = Math.ceil(fileSize / this.maxChunkSize);
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
  await this.uploadChunk(filePath, remoteFilePath, fileSize, chunkIndex, progressBar);
}

每次上傳發(fā)起請(qǐng)求都需要這四個(gè)字段： Remote-File-Path ：服務(wù)器端保存路徑 File-Size ：文件總字節(jié)大小 Start-Byte ：本次請(qǐng)求起始字節(jié)下標(biāo) End-Byte ：本次請(qǐng)求結(jié)束字節(jié)下標(biāo) 參數(shù)通過自定義header提交到服務(wù)器端。

async uploadChunk(filePath, remoteFilePath, fileSize, chunkIndex, progressBar) {
// 計(jì)算本次上傳起始位置
const startByte = chunkIndex * this.maxChunkSize;
// 計(jì)算本次上傳結(jié)束位置，如果超過文件長度，則使用文件長度-1
const endByte = Math.min((chunkIndex + 1) * this.maxChunkSize - 1, fileSize - 1);
const headers = {
  'Content-Type': 'application/octet-stream',
  'Remote-File-Path': encodeURIComponent(remoteFilePath),
  'File-Size': fileSize,
  'Start-Byte': startByte,
  'End-Byte': endByte,
};
// 創(chuàng)建二進(jìn)制數(shù)據(jù)流
const chunkStream = fs.createReadStream(filePath, {
  start: startByte,
  end: endByte,
});
// 發(fā)起請(qǐng)求
await axios.post(
  `${this.protocol}://${this.host}:${this.port}/uploadchunk`,
  chunkStream,
  {
    headers,
    onUploadProgress: (progressEvent) => {
      const curr = startByte + progressEvent.loaded;
      progressBar.tick(curr);
    },
  });
}

使用 form-data 表單也可以實(shí)現(xiàn)大文件上傳， form-data 類型每個(gè)片段都可以自定類型。實(shí)現(xiàn)方式?jīng)]什么區(qū)別。

ftp客戶端實(shí)現(xiàn)

這個(gè)使用第三方庫 ftp 實(shí)現(xiàn)上傳到ftp服務(wù)器，ftp同樣使用遞歸遍歷本地上傳路徑的方式，依次將文件上傳到遠(yuǎn)端服務(wù)器。

創(chuàng)建ftp連接

根據(jù)ftp服務(wù)器的地址及用戶名、密碼信息創(chuàng)建ftp連接。ftp連接服務(wù)器成功后，調(diào)用上傳方法。

// 創(chuàng)建FTP客戶端并連接到服務(wù)器
const client = new ftp();
client.connect({
  host: this.host,
  port: this.port,
  user: this.user,
  password: this.pwd,
});
client.on('ready', async () => {
  console.log('已連接到FTP服務(wù)器...');
  await this.uploadToFTP(this.localPath, this.remotePath, client);
  // 斷開連接
  client.end();
});
client.on('progress', (totalBytes, transferredBytes, progress) => {
  console.log(`上傳進(jìn)度: ${progress}%`);
});
client.on('error', (err) => {
  console.error(`FTP連接錯(cuò)誤: ${err}`);
});

遞歸遍歷路徑

遞歸遍歷路徑，如果當(dāng)前路徑是文件，調(diào)用上傳方法。如果當(dāng)前路徑是目錄，則遞歸調(diào)用。

// 遞歸上傳文件或文件夾
  async uploadToFTP(filePath, remoteFilePath, client) {
    const stats = fs.statSync(filePath);
    if (stats.isFile()) {
      try {
        await this.uploadFile(filePath, remoteFilePath, client);
        console.log(`上傳文件成功: ${filePath}`);
      } catch (error) {
        console.error(`文件上傳失敗: ${filePath}`);
        console.error(error);
      }
    } else if (stats.isDirectory()) {
      try {
        await this.createDir(remoteFilePath, client);
      } catch (error) {
        console.error(`創(chuàng)建遠(yuǎn)程文件夾失敗: ${remoteFilePath}`);
        console.error(error);
        return;
      }
      const list = fs.readdirSync(filePath);
      for (let index = 0; index < list.length; index++) {
        const file = list[index];
        const childFilePath = path.join(filePath, file);
        const childRemoteFilePath = path.join(remoteFilePath, file);
        await this.uploadToFTP(childFilePath, childRemoteFilePath, client);
      }
    }
  }

上傳文件

這個(gè)上傳很簡單，調(diào)用封裝好的put方法，將文件發(fā)送到ftp服務(wù)器。

uploadFile(filePath, remoteFilePath, client) {
    return new Promise((resolve, reject) => {
      client.put(filePath, remoteFilePath, (err) => {
        if (err) {
          reject(err);
          return;
        }
        resolve();
      });
    });
}

上傳進(jìn)度展示

上傳進(jìn)度使用第三方庫 progress 在命令行界面顯示上傳進(jìn)度及文件，可以方便的跟蹤上傳情況。使用axios發(fā)送http請(qǐng)求時(shí)，可以使用 onUploadProgress 方法獲取進(jìn)度并使用 progress 展示出來。使用如下代碼創(chuàng)建一個(gè)進(jìn)度實(shí)例對(duì)象，第一個(gè)參數(shù)是輸出的結(jié)構(gòu)，第二個(gè)參數(shù)是參數(shù)配置。

const progressBar = new ProgressBar(
  `Uploading ${filePath} [:bar] :percent`,
  {
    total: fs.statSync(filePath).size,
    width: 40,
    complete: '=',
    incomplete: ' ',
  }
);

在axios中展示使用：

// 發(fā)起請(qǐng)求
await axios.post(
  'http://127.0.0.1/uploadchunk',
  chunkStream,
  {
    headers,
    onUploadProgress: (progressEvent) => {
      progressBar.tick(progressEvent.loaded);
    },
  });
}