快捷導(dǎo)航

前端發(fā)送文件后端的nest.js如何接收文件名詳解

更新時間：2026年02月12日 08:30:32 作者：江啟年

這篇文章主要介紹了前端發(fā)送文件后端的nest.js如何接收文件名的相關(guān)資料,包括使用FormData對象封裝文件,并通過append方法添加文件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

當(dāng)我們在前端發(fā)送文件的時候，首先把文件的數(shù)據(jù)整合起來，在業(yè)務(wù)層匯聚到接口層，接口層使用參數(shù)接收一個或多個文件：

export function useUploadFile() {
  return useMutation({
    mutationFn: async ({
      bucket,
      files,
    }: {
      bucket: string;
      files: File[];
    }) => {
      const formData = new FormData();
      files.forEach((file) => {
        formData.append('files', file, encodeURIComponent(file.name));
      });

      const res = await http.post<UploadFileApiResponse>(
        `${uploadFilePath}/${bucket}`,
        formData,
        {
          headers: {
            'Accept-Charset': 'utf-8',
          },
        }
      );
      return res;
    },
  });
}

在上面的代碼中，接收的是多個文件，使用File[]類型進行約束。

拿到文件后，先new一個FormData，用來發(fā)送文件，當(dāng)文件的發(fā)送“容器”。那么多個文件就需要把它們都放入“容器”里才行。使用forEach進行放入。

使用formdata的append函數(shù)即可添加。注意append函數(shù)的第一個參數(shù)，那是文件的描述符號，可以隨便寫，當(dāng)然，開發(fā)過程中需要遵守開發(fā)標(biāo)準(zhǔn)，后端接收的時候用什么描述符號，就填什么。

最關(guān)鍵的是第三個參數(shù)，第三個參數(shù)是調(diào)用了encodeURIComponent函數(shù)，這個函數(shù)會把字符轉(zhuǎn)換為URL-encoded UTF-8 ， 也就是URL編碼的utf8格式。

那么就需要說一下nestjs的文件接收的編碼轉(zhuǎn)換的坑了。

使用nestjs接收文件時，使用：

@Post('upload/:bucket')
  @UseInterceptors(FilesInterceptor('files', 100))
  async uploadFile(
    @Param('bucket') bucket: string,
    @UploadedFiles() files: Express.Multer.File[],
  ) {}

這樣的方式接收文件。

問題在于它接收的時候，會把文件名從utf8轉(zhuǎn)為ISO-8859-1 （Latin-1 ） 編碼，這導(dǎo)致文件的中文名會變成：“çµå¶é”這樣的字符。

所以為了避免這樣的問題，就需要

formData.append('files', file, encodeURIComponent(file.name));

在這里調(diào)用encodeURIComponent對原始的文件名進行編碼，這樣到了后端，文件的編碼形式就不會改變。

后端使用文件名時，如下方法即可：

        files.map(async (f) => {
            // 解碼前端發(fā)送的url編碼形式，正確的將文件名傳輸過來
            const newfilename = decodeURIComponent(f.originalname);

            // 為minIO的每個文件添加一個單獨的uuid，防止文件名重名，在獲取文件信息以及下載文件時予以清除
            const UUID = randomUUID();
            const safeFilename = newfilename.replace(/[“”#]/g, '').trim();
            this.minioService.validateFile(f);

            // 保存文件信息到mysql數(shù)據(jù)庫
            await this.fileService.saveFile(
              safeFilename,
              UUID,
              f.mimetype,
              f.size,
            );

            // 分片上傳文件到 MinIO
            await this.minioService.uploadFile(UUID, f, bucket);

            // 更新任務(wù)的已上傳文件數(shù)
            const task = uploadTasks.get(taskId);
            if (task) task.uploadedFiles++;
          }),
        );

可以看到在第三行，調(diào)用了decodeURIComponent對文件的原始名稱進行解碼，即可得到正確的文件名。

總結(jié)

到此這篇關(guān)于前端發(fā)送文件后端的nest.js如何接收文件名的文章就介紹到這了,更多相關(guān)后端nest.js接收文件名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: