構成

サーバサイド
・.NET6
・C#
クライアントサイド
・Vue3
・TypeScript
・Quasar Framework

やったこと

クライアントサイドからのファイルアップロード。
画面によって複数ファイルアップロードすることあり

本編

ファイル選択はQFileでやってます。
下記フォームデータ作る部分

UploadCommand.ts

export class UploadCommand extends UploadBase<any> {
  constructor(files: File[]) {
    this.files = files;
  }
  files: File[] = [];
}

UploadBase.ts

~~~省略~~~
this.configure = (config, data) => {
  if (config.headers) {
    config.headers["content-type"] = "multipart/form-data";
  }

  let form = new FormData();
  for (let key in data) {
    // データが複数の場合（複数ファイル）
    if (Array.isArray(data[key])) {
      for (let d in data[key]) {
        // key値「files」に対して複数のファイルをappend
        form.append(key, data[key][d]);
      }
    } else {
      form.append(key, data[key]);
    }
  }
  config.data = form;
};
~~~

次にサーバ側で受け取る部分

TestController.cs

[ApiController]
[Route( "api/test" )]
public class TestController : Controller
{
    [HttpPost]
    [Route( "upload" )]
    public async Task<ActionResult> Insert( [FromForm] UploadCommand command )
    {
        // なにかしらの処理
        return Success();
    }
}

UploadCommand.cs

public class InsertInformationCommand
{
    // ファイルはIFormFileで受け取る
    // アップロードしたファイルリストがここに入ってくる
    public List<IFormFile> ImportFiles { get; set; }
}

サーバ側でのファイルの受け取り方は、
・1ファイルならIFormFile
・複数ファイルならIFormFileCollection、IEnumerable、Listのどれか

サーバ側で受け取れたならあとは保存するなり読み込んでほげほげするなり。

おわり

Command/Handlerパターン使ってるのそのまま持ってきてるから見づらかったらすみません。

おわり

参考
https://learn.microsoft.com/ja-jp/aspnet/core/mvc/models/file-uploads?view=aspnetcore-7.0

.NET6 WebAPIでファイルアップロード

構成

やったこと

本編

おわり