FormData は、複数のファイルやその他のデータを同時に転送します

最近では、ユーザーが Web ダイアログ ボックスでテキスト コンテンツを入力し、添付ファイルをアップロードできるという要件があります.添付ファイルの数は制限されておらず、すべての添付ファイルの合計サイズは 20M を超えません.

これを実現する方法は複数あります. たとえば, 以前のバックエンドの同僚はファイルとテキストを別々に送信する必要がありました. ファイルは別のインターフェースでアップロードされます. アップロードが成功した後, IDが返されます. id とテキストは別のインターフェイスで一緒に渡されます. バックエンドは問題ありません, バックエンドは id に従って対応するファイルを見つけます. この実装は比較的単純です. 多くのアップロード コンポーネント (elemenUI plus や arco などの UI コンポーネントなど) -design、および ant design) は、ファイルのアップロードをサポートできます。

ただし、この連携のバックエンドの同僚が必要とするのはインターフェイスであり、ファイルとテキストは FormData でバックエンドに送信されます。

フォームデータとは

Introduction to FormData in MDN
: The FormData インターフェイスは、フォーム データを表すキー/値の構築メソッドを提供し、XMLHttpRequest.send() メソッドを介してデータを簡単に送信できます. このインターフェイスは、このメソッドと同等です. シンプルでわかりやすい. 送信エンコーディング タイプが「multipart/form-data」に設定されている場合、フォームと同じ形式が使用されます。
渡されたフォームのクエリ パラメータを使用して単純な GET リクエストを作成する場合は、URLSearchParams に直接渡すことができます。
FormData インターフェイスを実装するオブジェクトは、entry() を呼び出さずに for…of 構造体で直接使用できます。 for (var p of myFormData) は for (var p of myFormData.entries()) と同じです。

FormData コンストラクタ FormData():

 new FormData();
 FormData.append()   // 向 FormData 中添加新的属性值

次に実装を見てください。

//  upload 组件获取文件列表就不写了，暂定这里获得 文件列表 fileList: [ ]
const allFileMaxListSize = 20971520, // 所有上传文件的大小 20M（20*1024*1024）
const fileFormData = new FormData();
let totalFileSize = 0;
// 这里我用的是 forEach 循环 append 添加，也可以不用 forEach 自己说手动 多次 append，根据自己的需求
fileList?.forEach((item: any) => {
   fileFormData.append('files', item.file); 
    totalFileSize += item.file.size;
  });
  
// 注释！！！！这里为什么可以循环给 fileFormData.append('files', item.file); 因为 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

if (totalFileSize > data.allFileMaxListSize) {
        alert('上传文件总和超过20M！');
      } else {
        const value = `${这里是文本的数据}`;
        fileFormData.append('txt', value);
        fileFormData.append('id', current);  // 如果当前修改数据的id，这行可有可无看具体情况
        try {
          commitComment(String(ticketId), fileFormData);  // 发送请求
         fileList = [];  // 清空
          alert('提交成功！');
        } catch {
          alert('error');
        }
      }

したがって、コアキーは次の文です。

この記事がお役に立てば幸いです。