加载笔记内容...
加载笔记内容...
trpc 提交 FormData 和 二进制文件的解决办法
In addition to JSON-serializable data, tRPC can be used with FormData, File, and other Binary types
FormData InputFormData is natively supported, and for more advanced usage you could also combine this with a library like zod-form-data to validate inputs in a type-safe way.
1// Our examples use Zod by default, but usage with other libraries is identical
2import { z } from 'zod';
3
4export const t = initTRPC.create();
5const publicProcedure = t.procedure;
6
7export const appRouter = t.router({
8 hello: publicProcedure.input(z.instanceof(FormData)).query((opts) => {
9 const data = opts.input;
10
11const data: FormData
12 return {
13 greeting: `Hello ${data.get('name')}`,
14 };
15 }),
16});1// Our examples use Zod by default, but usage with other libraries is identical
2import { z } from 'zod';
3
4export const t = initTRPC.create();
5const publicProcedure = t.procedure;
6
7export const appRouter = t.router({
8 hello: publicProcedure.input(z.instanceof(FormData)).query((opts) => {
9 const data = opts.input;
10
11const data: FormData
12 return {
13 greeting: `Hello ${data.get('name')}`,
14 };
15 }),
16});File and other Binary Type InputstRPC converts many octet content types to a ReadableStream which can be consumed in a procedure. Currently these are Blob Uint8Array and File but more can be added easily.
1import { octetInputParser } from '@trpc/server/http';
2
3export const t = initTRPC.create();
4const publicProcedure = t.procedure;
5
6export const appRouter = t.router({
7 upload: publicProcedure.input(octetInputParser).query((opts) => {
8 const data = opts.input;
9
10const data: ReadableStream<any>
11 return {
12 valid: true,
13 };
14 }),
15});