フロントエンドの vue+express ファイルのアップロードとダウンロードの例

糸初期化 -y
糸を追加エクスプレスノードモン -D
var express = require("express");
定数 fs = require("fs");
var パス = require("パス");
const multer = require("multer"); // パスを指定します var app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true}));
// フロントエンドはクロスドメインの問題を解決します app.all("*", (req, res, next) => {
  res.header("アクセス制御許可オリジン", "*");
  次（）;
});
// 静的リソースにアクセスする app.use(express.static(path.join(__dirname)));

// ファイルのアップロード app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
  const { フィールド名、 元の名前 } = req.files[0];
  // 新しいパスを作成します const name = fieldname.slice(0, fieldname.indexOf("."));
  const newName = "public/" + name + path.parse(originalname).ext;
  fs.rename(req.files[0].path, newName, 関数(err) {
    もし（エラー）{
      res.send({ code: 0, msg: "アップロードに失敗しました", data: [] });
    } それ以外 {
      res.send({ code: 1, msg: "アップロード成功", data: newName });
    }
  });
});
// ファイルのダウンロード app.get('/download', function(req, res) {
  res.download('./public/test.xls');
});

// 画像のダウンロード app.get('/download/img', function(req, res) {
  res.download('./public/2.jpg');
});

ポートを 9527 にします。
app.listen(port, () => console.log(`ポートが開始されました: http://localhost:${port}`));

 <フォームアクション="http://localhost:9527/upload" メソッド="POST" encType="multipart/form-data">
      <input type="file" name="user"/>
      <input type="submit" />
    </フォーム>

 <input type="file" @change="changeHandler($event)"/>
     changeHandler(イベント) {
      ファイルをevent.target.files[0]とします。
      console.log("ファイル",ファイル)
      データを新しいFormData()に格納します。
      data.append(files.name,files);
      console.log("データ",データ)
      axios.post("http://localhost:9527/upload",データ,{
        ヘッダー:{
          "コンテンツタイプ":"マルチパート/フォームデータ"
        }
      }).then(res =>{
        コンソールログ("res",res)
      })
    }, 

 <input type="button" value="クリックしてダウンロード" @click="handleDownload">
      ハンドルダウンロード() {  
    アクシオス({  
      メソッド: 'get'、  
      URL: "http://localhost:9527/download",  
      データ： {    
        test: 「テストデータ」  
      },  
      responseType: "arraybuffer" // arraybuffer は js でバイナリを処理するためのインターフェースです}).then(response => {          
      // 返されたバイナリ データを使用して Blob インスタンスを作成します if(!response) return;
      blob = new Blob([response.data], {            
        タイプ: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
      }) // .xlsx ファイルの場合          
      // URL.createObjectURL を通じてファイル パスを生成します。let url = window.URL.createObjectURL(blob) 
      console.log("url==========",url)        
      // タグを作成する let ele = document.createElement("a")          
      ele.style.display = 'なし'          
      // href属性をファイルパスに設定し、download属性をファイル名に設定します。ele.href = url          
      ele.download = this.name          
      // ページに a タグを追加し、クリックをシミュレートします。 document.querySelectorAll("body")[0].appendChild(ele)          
      ele.click()          
      // a タグを削除する ele.remove()        
    });
  }, 

 // バイナリストリームイメージファイルをダウンロード downLoadImg() {
     アクシオス({
        メソッド: 'get'、
        URL: `http://localhost:9527/download/img`,
        レスポンスタイプ: '配列バッファ',
        パラメータ: {
          id: 12
        }
      }).then(res => {
        var src = 'data:image/jpg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
       // this.srcImg = src // 画像表示 var a = document.createElement('a')
        a.href = src
        a.download = '2.jpg'
        クリック()
        削除()
      })
    }