前端发送文件到后端：如何解决400错误？

vue.js

2024-03-25 05:37:59

前端发送文件到后端：解决400错误

问题

当你尝试通过表单将文件和自定义名称提交到Flask后端时，出现了400错误：“浏览器（或代理）发送了该服务器无法理解的请求”。

解决方案

使用FormData接口

在前端，使用FormData接口创建包含文件和自定义名称的表单数据。在后端，直接从请求对象中访问文件。

设置请求头

在Vue的REST函数中，检查请求体类型，并根据需要将Content-Type头设置为multipart/form-data。

代码示例

前端（Vue）：

const formData = new FormData();
formData.append('file', file.value as File);
formData.append('name', name.value as string);

后端（Flask）：

file = request.files['file']
name = request.form['name']

前端（Vue）：

export function rest(url: string, body?: unknown, method?: string, headers?: HeadersInit){
    const contentType = body instanceof FormData ? 'multipart/form-data' : 'application/json';
    return fetch(url, {
        method: method ?? (body ? "POST" : "GET"),
        headers: {
            'Content-Type': contentType,
            ...headers
        },
        body: body ? JSON.stringify(body) : undefined
    })
}