nuxt3(h3の関数)でのファイルアップロード

花粉症に悩まされる時期がまだまだ続いておりますが、強力な薬を服用することで凌いでます。

さて、今回はnuxt3でファイルアップロードを実装する方法を見ていきます。nodejsのexpressアプリケーションでは、multerやformidableといった素晴らしいライブラリを使って簡単にアップロード処理を実装することができます。nuxt3（h3）でmulterやformidableのライブラリを使うこともできるのですが、外部ライブラリを使わずとも標準機能で簡単にファイルアップロードを実装することができるようになっています。今回はその方法を見ていきます。

環境
サンプル
まとめ
参考リンク

環境

macOS Catalina (intel cpu)
nuxt 3.4.1
Node.js 18.15.0

サンプル

早速サンプルを見ていきます。

app.vue

fetchでformデータを処理するにはFormDataを使います。今回は、textとfileの2種類のデータをPOSTするサンプルとしています。

<script setup lang="ts">
const files = ref<FileList>();
const title = ref("");
const uploadData = ref();
function changeFiles(event: Event) {
const result = event!.target as HTMLInputElement;
files.value = result.files!;
}
async function upload() {
const formData = new FormData();
formData.append("title", title.value);
if (files.value) {
for (const item of files.value!) {
formData.append("files", item, encodeURIComponent(item.name)); // 日本語ファイル名はエンコード
}
}
await useFetch("/api/upload", {
method: "POST",
body: formData,
}).then((result) => {
uploadData.value = result.data;
});
}
</script>
<template>
<div>
<h2>File Uploads</h2>
<form @submit.prevent="upload">
<div>Text field title: <input type="text" name="title" /></div>
<div>
File: <input type="file" name="files" @change="changeFiles" multiple />
</div>
<input type="submit" value="アップロード" />
</form>
{{ uploadData }}
</div>
</template>

const files = ref<FileList>();

const title = ref("");

const uploadData = ref();

function changeFiles(event: Event) {

const result = event!.target as HTMLInputElement;

files.value = result.files!;

}

async function upload() {

const formData = new FormData();

formData.append("title", title.value);

if (files.value) {

for (const item of files.value!) {

formData.append("files", item, encodeURIComponent(item.name)); // 日本語ファイル名はエンコード

}

await useFetch("/api/upload", {

method: "POST",

body: formData,

}).then((result) => {

uploadData.value = result.data;

});

}

</script>

<div>

<h2>File Uploads</h2>

<div>Text field title: <input type="text" name="title" /></div>

<div>

File: <input type="file" name="files" @change="changeFiles" multiple />

</div>

</form>

</div>

</template>

server/api/upload.post.ts

readMultipartFormDataという関数でbodyをパースします。この関数は、nuxt3の内部で使われているh3というフレームワークが提供している関数です。関数の引数にeventオブジェクトを渡すとパースした結果が返ります。

export default defineEventHandler(async (event) => {
const files = await readMultipartFormData(event);
if (!files || files.length === 0) {
throw createError({
statusCode: 400,
statusMessage: "No files were uploaded",
});
}
const uploaded = files.map((item) => ({
contentType: item.type,
filename: decodeURIComponent(item.filename!), // エンコードしているのでデコード
name: item.name,
size: item.data.length,
}));
return { uploaded };
});

export default defineEventHandler(async (event) => {

const files = await readMultipartFormData(event);

if (!files || files.length === 0) {

throw createError({

statusCode: 400,

statusMessage: "No files were uploaded",

});

}

const uploaded = files.map((item) => ({

contentType: item.type,

filename: decodeURIComponent(item.filename!), // エンコードしているのでデコード

name: item.name,

size: item.data.length,

}));

return { uploaded };

});

早速実行してみましょう。３つの日本語ファイル名を含む画像ファイルを送信してみます。

リクエストした結果を返せていることが分かります。

まとめ

nuxt3では、標準でファイルアップロードを実装するための関数があります。multerやformidableのようにファイルデータをディスクに保存したりといった他の付加機能はないので、そこは自分で実装する必要があります。

環境

サンプル

まとめ

参考リンク

コメント