axiosを使ってフロントエンド(Vue.js×TypeScript)のファイル情報をバックエンド(Node.js)に送る

はじめに

Buffer型でフロントエンドからバックエンドに送信をして、Buffer型からファイルを作成しました。
半年以上前に作成したもので、現在データが殆ど残っていないため細かい設定などは省略しています。
当時、バックエンドはAWSを使って作成していましたが、後ほどPCに環境を構築して確認していきたいと思います。
参考になる部分が少しでもあれば幸いです。

実行環境

フロントエンド

• axios : 0.27.2
• vue : 3.2.13
• @types/node : 18.7.13
• typescript : ~4.5.5

バックエンド

• string_decoder : 1.3.0

フロントエンド

<template>
  <div>
    <textarea v-model="inputText"></textarea>
    <input type="file" id="tmpfile" multiple @change="tmpFileClick" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import axios from "axios";

export default defineComponent({
  data() {
    return {
      inputText: "text",
      selectedText: "text",
      outputText: "text",
      saveText: "text",
      tmpFileName: "",
      tmpFiles: {},
      rireki: "",
      postData: "",
      check1: "",
      check2: "",
      fileNameList: [""],
      fileData: [],
      uploadFile: null,
      message: "",
      modal: false,
    };
  },
  methods: {
    exeClick: function () {
      let params = new FormData();
      params.append("Text", this.inputText);
      let tmpfile = document.getElementById("tmpfile");
      if (tmpfile instanceof HTMLInputElement) {
        if (tmpfile.files) {
          for (let i2 = 0; i2 < tmpfile.files.length; i2++) {
            params.append("Files[]", tmpfile.files[i2], this.fileNameList[i2]);
          }
        }
      }

      if (setDate.getTime() > date.getTime()) {
        this.message =
          "処理を開始しました。\n「OK」をクリックし、しばらくお待ちください。";
        this.modal = true;
        axios
          .post(
            "<API送信先URL>",
            params,
            {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            }
          )
          .then((response) => {
            console.log(response);
            response_data = JSON.stringify(response);
            this.message = response_data;
            this.modal = true;
          })
          .catch((error) => {
            console.log(error);
            this.message = "通信失敗\n\n" + error;
            this.modal = true;
          });
        date = new Date();
        this.rireki =
          this.rireki +
          date +
          "　終了\\n詳細の内容はコンソールをご確認ください。\\n";
        localStorage.rireki = this.rireki;
      } else {
        this.message =
          "処理を停止しました。\n「処理開始時刻」を現在の時刻より5分後以上に設定してください。";
        this.modal = true;
        date = new Date();
        this.rireki = this.rireki + date + "　処理停止\\n";
        localStorage.rireki = this.rireki;
      }
    },

    tmpFileClick(e: Event) {
      let date = new Date();
      this.rireki = this.rireki + date + "　添付ファイル\\n";
      localStorage.rireki = this.rireki;
      if (e.target instanceof HTMLInputElement) {
        if (e.target.files) {
          this.tmpFiles = e.target.files;
          let n1 = e.target.files.length;
          this.tmpFileName = "";
          for (let i1 = 0; i1 < n1; i1++) {
            let file = e.target.files[i1];
            console.log(file);
            this.fileNameList[i1] = file.name;
            this.tmpFileName = this.tmpFileName + file.name + "\n";
          }
        }
      }
    },
  },
});

バックエンド

const { StringDecoder } = require('string_decoder');
const decoder = new StringDecoder('utf8');
const fs = require('fs');

        fileName[num2] = part[i].filename;
        fileData[num2] = decoder.write(part[i].data);

    if (fileName[0]) {
      for(let i = 0; i<fileName.length; i++){
        fs.writeFileSync('/tmp/' + fileName[i], fileData[i]);
        fs.readFileSync('/tmp/' + fileName[i]);
        let input = await page.$('#attachmentFile');
        await input.uploadFile('/tmp/' + fileName[i]);
        await page.waitForNavigation();
      }
    }