フロントエンド

一般的なプロセスは次のとおりです。

<input type="file"> タグのdom オブジェクトを取得するために、vue によって提供される ref 属性を使用します。
dom オブジェクトのfiles 属性のデータ型は、入力ファイル情報であるFileListです。
FileList をトラバースして File オブジェクトを取得し、FileReader を使用して File オブジェクトを読み取り、ファイルのArrayBuffer オブジェクトを取得します。(FileReader.readAsDataURL() を使用して、ファイルを base64 でエンコードされた URL 形式の文字列に変換し、次の手順を実行してバックエンドに渡すこともできます)
ArrayBuffer オブジェクトを配列に変換し、ポストリクエストを使用してバックエンドに送信します。(余談: ArrayBuffer オブジェクトを取得した場合、バックエンドはファイルを保存できますが、奇妙なことに、ArrayBuffer オブジェクトが post パラメータに直接挿入されている場合、バックエンドは空のオブジェクトを受け取りますが、ArrayBuffer が空オブジェクトではないので、ここではまず彼を配列に変換してから、その配列をバックエンドに送信します。)

<template>
  <label><input type="file" ref="input" multiple>文件</label>
  <button @click="submit">提交文件</button>
</template>

<script lang="ts" setup>
  import {
      
      ref} from 'vue'
  import axios from 'axios'
  const input = ref<any>()
  function submit(){
      
      
    const files = input.value.files as FileList
    for(let i = 0; i < files.length; i++){
      
      
      const file = files[i]
      const fileReader = new FileReader()
      fileReader.readAsArrayBuffer(file)
      //文件读取完毕触发onload事件
      
      fileReader.onload = () => {
      
      
        //把ArrayBuffer对象转换为数组
        const arrayBuffer = Array.from(new Uint8Array(fileReader.result as ArrayBuffer))
        axios.post('http://localhost:9000/submitFile', {
      
      fileName:file.name, arrayBuffer:arrayBuffer})
        .then(() => {
      
      console.log(file.name + '上传成功')})
      }
    }
  }
</script>

サーバ

サーバー側の処理は比較的シンプルです. 注目すべき点は2つあります. 1つは, bodyを解析するためのミドルウェアである body-parser のデフォルトのサイズ制限が100kbです. サイズが100kbを超えるとエラーが報告されます. fs.writeFile() の使用、その 2 番目のパラメーターは Buffer データ型を受け入れます、Buffer.from() の使用に注意してください、そのパラメーターは文字列、バッファー、配列、または arrayBuffer です。

const express = require('express')
const cors = require('cors')
const fs = require('fs')
const bodyParser = require('body-parser')
const app = express()

app.use(cors()) //允许简单请求和非简单请求的跨域

//解析Content-Type:application/x-www-form-urlencoded的body
app.use(bodyParser.urlencoded({
    
    
    extended: false,
    limit: '50mb' //body大小限制值，默认是100kb，但很多文件都大于100kb所以需要手动修改
}))

//解析Content-Type:application/json的body
app.use(bodyParser.json({
    
    limit: '50mb' })) //同理提高大小限制

const basePath = './' //规定保存文件的路径

app.post('/submitFile', (req, res) => {
    
    
    //把接收到的内容写入文件，Buffer.from()接收一个数组作为参数
    fs.writeFile(basePath + req.body.fileName, Buffer.from(req.body.arrayBuffer), error => {
    
    
        console.log(error)
    })
})
app.listen(9000)

より標準化されたファイルのアップロード

上記の方法は自分で手探りですが、基本的にはファイルオブジェクトを通してファイルデータを読み込み、ファイルデータを配列や文字列に変換し、最後にポストリクエストで渡します。
オンラインで検索したところ、そのようなファイルを転送する人はほとんどいません。また、オンラインのピクチャーベッドやオブジェクトストレージクラウドサービスなどのサードパーティのクラウドストレージライブラリを使用している場合、それらが提供する API はその種の転送方法をサポートしていません。

実際、ファイルをアップロードするより標準化された方法は、ファイルオブジェクトをポストリクエストパラメータの値として直接使用し、ファイルデータを手動で読み取ったり処理したりせずに、ファイルをバックエンドに直接渡すことです。
ただ、以前やってみたところ、リクエストパラメータのファイルオブジェクトがブラウザキャプチャーで常に空のオブジェクトになっていたのですが、これはリクエストヘッダーが正しく設定されていないことが原因でした。ファイルのデータを正しくアップロードできるように、リクエストヘッダーをmultipart/form-dataに設定します。