next 3 useFetch Post请求:从服务器api路由中缺少文件对象

Question

我正试图将文件对象发布到我的下一个3 api路由

问题是:

• 来自客户端的数据有我的文件对象
• 服务器返回空对象

问题截图

我的file对象去了哪里?

const handleImageUpload = async (evt: Event) => {
const target = evt.target as HTMLInputElement 
if (target.files) {
const file = target.files[0]
const upload: iUpload = {
name: file.name,
type: file.type,
file
}
console.log("data from client", upload)
try {
const { data, error } = await useFetch(constants.imageUploadApiUrl, {
headers: { "Content-type": "application/json" },
method: 'POST',
body: upload
})

console.log("data from server", data.value)
} catch (error) {
console.log(error)
}
}
}

常数。imageUploadApiUrl (api路由)有以下

import { getQuery, readBody } from "h3"
import { iUpload } from "~~/helpers/interfaces"
export default defineEventHandler(async (event) => {
try {
const query = getQuery(event)
const body = await readBody(event) as iUpload
return { body }
} catch (error: any) {
return { error: error.message }
}
})

iUpload接口是这个

export interface iUpload {
name: string;
type: string;
file: File;
}

Answer 1

我终于让它工作了。同时，它使用supabase作为它的后端(忘了提)。

但这是我所做的更改。

#1 -我添加了一个实用程序函数将文件转换为base64字符串

export const getBase64 = (file: File) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}

#2 -我像下面这样更新了handleImageUpload函数。唯一的变化是在文件键

const handleImageUpload = async (evt: Event) => {
const target = evt.target as HTMLInputElement
if (target.files) {
const fileObj = target.files[0]
const upload: iUpload = {
path: id(memberName(store.selected), '-'),
name: fileObj.name,
file: await getBase64(fileObj) as string, // <**=**
type: fileObj.type
}
console.log("data from client", upload)
try {
const { data, error } = await useFetch(constants.imageUploadApiUrl, {
headers: { "Content-type": "multipart/form-data" },
method: 'POST',
body: upload
})
console.log("data from server", data.value)
} catch (error) {
console.log(error)
}
}
}

#3 -此外，我更新了服务器路由如下:

export default defineEventHandler(async (event) => {
try {
const body = await readBody(event) as iUpload
const filePath = `${body.path}/${body.name}`

const res = await fetch(body.file)
const blob = await res.blob()
const response = await supabase.storage
.from("pictures")
.upload(filePath, blob, {
contentType: body.type,
upsert: true,
})
return {
data: response.data,
error: response.error?.message,
}
} catch (error: any) {
return { error: error.message }
}
})

#4 -最后我更新了supabase存储桶和存储对象的策略如下:Supabase存储策略更新