form-data 相关问题

如何将 File 对象转为 Sharp 能够理解的缓冲区？

我有一个 File 类型的对象，它由 Node.js 后端处理。 导出默认函数处理程序（req：NextRequest，res：NextResponse）{ console.log(“方法：”，要求。 我有一个 File 类型的对象，它由 Node.js 后端处理。 export default function handler(req: NextRequest, res: NextResponse<Object>) { console.log("METHOD: ", req.method) if (req.method == "POST") { const form = new Formidable.IncomingForm() form.parse(req, (error: any, fields: any, files: any) => { console.log(fields) console.log(files.image) await Sharp(Buffer.from(files.image)) .toFormat("webp") .toFile("save.webp") }) res.status(200).send({ message: "Success" }) } else { res.status(404).send({ message: "POST only supported" }) } } files.image的类型为File，当我尝试将其传递到Buffer.from()时，我会收到错误 The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of File 我尝试传入await Sharp(Buffer.from(files.image, 'base64'))但出现同样的错误。有什么办法可以把 files.image 变成 Buffer Sharp 可以理解的吗？ 更新：我找到了一种通过使用以下方法来实现我的目标的方法： if (req.method == "POST") { const form = new Formidable.IncomingForm() form.parse(req, (error: any, fields: any, files: any) => { // Pass in the temp file location where the incoming form stores the request ConvertToWebP(files.image.path) }) res.status(200).send({ message: "Success" }) } else { res.status(404).send({ message: "POST only supported" }) } } 经过几个小时的不同方法后，我通过查看 File 对象发现了这一点： { image: File { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, size: 481, path: 'C:\\XXX\\XXX\\AppData\\Local\\Temp\\upload_XXX', name: 'eagle.png', type: 'image/png', hash: null, ... 注意：我想保持这个问题的开放性，因为这个解决方法可能有效，但我仍然想了解为什么我不能传入 Buffer 对象。 您可以使用 Formidable File 接口 filepath 属性将上传的文件内容读取到 Buffer 中。 ... import * as fs from 'fs'; ... const buf = await fs.promises.readFile(files.image.filepath); await Sharp(buf); ... ... 如果有人遇到这个问题，尝试将图像文件从客户端上传到服务器，并使用 Sharp 处理它们，我是这样做的： 在客户端，我发送带有表单数据的 POST 请求： const formData = new FormData() for (const file of files) { formData.append("files", file, file.name) } const r = await fetch(url, { method: "POST", body: formData, }) 在服务器上，我们需要1）使用中间件（例如Express或单独的中间件文件 - 我使用后者）将多部分内容类型的表单数据处理为FileStream（它不会是文件对象），2）将FileStream处理为数据块，3）将数据块数组与缓冲区合并（参见this答案）并将它们附加到主体。我用过Busboy： const busboy = require('busboy') const parseMultipartBody = async (req, res, next) => { const bb = busboy({ headers: req.headers }) req.body.filesAsBuffer = [] // every file here will be FileStream, not File Object bb.on('file', (name, file, info) => { const data = [] let fileAsBuffer file.on('data', (chunk) => { data.push(chunk) }).on('close', async () => { // merge data chunks with buffer and attach them to body fileAsBuffer = await Buffer.concat(data) req.body.filesAsBuffer.push(fileAsBuffer) }) }) bb.on('close', () => { next() }) req.pipe(bb) } 在路线上我们可以使用Sharp进行任何我们需要的操作： const sharp = require('sharp') export const POST = async (req, res) => { const { body } = req const { filesAsBuffer } = body for (const fileAsBuffer of filesAsBuffer) { const metadata = await sharp(fileAsBuffer).metadata() console.log(1, metadata) } ... }

无法使用java azure函数从邮递员表单数据获取图像来存储Blob存储

在此输入图像描述，我使用java azure函数，因为我想从邮递员表单数据获取图像，但无法以正确的格式获取图像，并且图像大小增加了，但它可以...

比较 javascript FormData 对象

如何比较 FormData 对象，我试图在发送 ajax 请求之前检查表单是否已更改。 但似乎物体不能比较。有什么办法可以转换吗...

新的FormData返回空对象

我正在尝试使用 FormData 通过 fetch API 在 POST 请求中发送用户输入的数据。问题是，当我使用我创建的表单创建一个新的 FormData 对象时，它会不断创建...

多文档选择器未在本机反应中上传到服务器

我正在使用 React Native 文档选择器并选择多个文档上传到服务器上。我也使用 formData 来上传文件。但在后端我的文件没有上传。我打得最好...

如何创建一个模式来接受文件对象数组？

formData 文件数组： const noteSubmitHandler = 异步事件 => { event.preventDefault(); 尝试 { const formData = new FormData(); 对于（令 i = 0；i < attachments.length; i++) { ...

图像无法在Azure Blob存储中以表单数据格式上传

我正在尝试通过邮递员以表单数据格式上传图像以存储在天蓝色blob存储中，邮递员给出响应200，但它无法存储在天蓝色blob存储中。 （注意：我想将图像存储在

将对象数组附加到 React 中的 FormData

我知道这个问题已经问了十几次了，但我似乎无法得到任何工作答案。 我有一个带有 React 前端和 Django Rest 后端的应用程序，我正在尝试发送一组

当我console.log它时，formData是空的

我想在表单中上传图像，但一段时间后我知道在多部分/表单数据中我需要使用 formData。在我的代码中使用 formData 后，我发现空值被发送到...

API 网关编码多部分/表单数据

我有一个通过直通反映在我的 API 网关中的 beanstalk，其中我的客户端向 beanstalk 发送直接的多部分/表单数据请求。图片发送正确，可以正常打开，但是...

使用 React 和 .Net Core 上传文件

我正在尝试上传文件，似乎该文件没有被解析到服务器/后端，因为文件后端的结果为空。我不确定我做错了什么......

html：加载formData以填充默认值

我有一个 HTML 表单： ... 我有一个 HTML 表单： <form id="myForm" method="POST" action="/submit" target="response-frame"> <div class="input"> <label for="name">Full Name</label> <input id="name" name="name" type="text" value="x" /> </div> <div class="input"> <label for="email">Email Address</label> <input id="email" name="email" type="email" value="[email protected]" /> </div> <button type="submit">Submit</button> <button type="loadValues" onclick="setFormValues()">Load Values</button> </form> 当我点击提交时，填写的值将以 formData 对象的形式发送 https://developer.mozilla.org/en-US/docs/Web/API/FormData 对于某些表单条目，我有默认/占位符值，例如对于电子邮件，我有默认值：[email protected]，当我提交表单时，此默认值包含在表单数据中。 我的问题是，有没有办法用现有的 formData 对象优雅地填充我的 HTML？ 我知道我可以使用填充表单的脚本，就像我在这里已经在某种程度上所做的那样： <script> function setFormValues() { const urlParams = new URLSearchParams(window.location.search); const key = urlParams.get("key"); if (key) { document.getElementById("name").value = key; } } window.onload = setFormValues; </script> 但是我的表单将有 15 个左右的字段，手动设置这些字段似乎很乏味，而且通过循环设置它们似乎不太优雅。 理想情况下，我只想“加载现有的 formData 对象”，它会自动放置所有默认值/占位符。然后，用户可以根据自己的喜好修改字段，当他们单击发送时，修改后的 formData 将发送到目的地。 我的完整代码在这里：https://github.com/charelF/wg-form-page/blob/main/public/form.html 您可以使用 Object.entries() 和 Array::forEach(): const obj = {name: 'Alexander Nenashev', email: '[email protected]'}; Object.entries(obj).forEach(([name, value]) => Object.assign(document.querySelector(`form [name="${ CSS.escape(name) }"]`), {value})); <form id="myForm" method="POST" action="/submit" target="response-frame"> <div class="input"> <label for="name">Full Name</label> <input id="name" name="name" type="text" value="x" /> </div> <div class="input"> <label for="email">Email Address</label> <input id="email" name="email" type="email" value="[email protected]" /> </div> <button type="submit">Submit</button> <button type="loadValues" onclick="setFormValues()">Load Values</button> </form>

Flask 后端收到 SocketIO 空 FormData

我正在尝试通过 SocketIO 发送一些表单值，包括文件 const handleSubmit = () => { const formData = new FormData(); formData.append('num1',numbers.num1); formData.app...

如何访问前端通过 JS FormData 传递的用 Python 编写的 Google Cloud Function 中的数据？

我有一个 ReactJS 前端，我在 FormData 结构中发送数据以及 POST 请求的正文负载，但我无法访问用 Python 编写的 Google Cloud 函数中的数据...

如何通过 Deno.serve 处理用户中止

Deno 网站有一个示例：https://deno.land/[email protected]/runtime/http_server_apis#inspecting-the-incoming-request 我已将其缩短为以下代码： 常量 abortController = 新

blazor 页面没有像应有的那样将 sessionData 加载到 RadzenGrid 中

我有一个表单，允许用户填写电子剩余的多个字段。它使用浏览器会话存储存储我在 RadzenCard 中的所有字段的数据，然后加载数据

如何用for循环迭代formData？

很简单，我想用js迭代formData。 迭代 formData 对象的示例位于此处。 在msdn中迭代formData 我根据示例代码创建了我的迭代方式。 ...

使用ajax将formData发送到spring服务器时如何添加对象列表

下面编写的代码中，objs 值为 null。我尝试了各种方法，但结果 objs 为空。如何在FormData中添加对象列表？ 在“网络”选项卡上检查有效负载时，obj...

当我记录它时，从现有表单创建的FormData似乎是空的[重复]

我正在尝试从网络表单中获取一组键（名称或类似名称）和值（值）： 我正在尝试从网络表单中获取一组键（<input>名称或类似名称）和值（<input>值）： <body> <form> <input type="text" name="banana" value="swag"> </form> <script> var form = document.querySelector('form'); var formData = new FormData(form); </script> </body> 根据 FormData 文档，formData 应包含表单中的键和值。但是 console.log(formData) 显示 formData 是空的。 如何使用FormData快速获取表单中的数据？ JSFiddle 更新：XHR 规范现在包含更多用于检查 FormData 对象的函数。 FireFox 从 v39.0 开始支持较新的功能，Chrome 预计在 v50 中获得支持。不确定其他浏览器是否如此。 var form = document.querySelector('form'); var formData = new FormData(form); for (var [key, value] of formData.entries()) { console.log(key, value); } //or console.log(...formData) 我也面临同样的问题。我无法在控制台上看到。您需要将以下内容添加到ajax请求中，这样数据就会被发送 processData: false, contentType: false 但是console.log(formData)显示formData是空的。 “空”是什么意思？当我在 Chrome 中测试它时，它显示 ‣ FormData {append: function} ...这就是说它是一个 FormData 对象，这正是我们所期望的。我做了一个小提琴并扩展为代码： var form = document.querySelector('form'), formData = new FormData(form), req = new XMLHttpRequest(); req.open("POST", "/echo/html/") req.send(formData); ...这是我在 Chrome 开发者工具网络面板中看到的： 所以代码按预期工作。 我认为这里的脱节在于您期望 FormData 像普通 JavaScript 对象或数组一样工作，并让您直接查看和操作其内容。不幸的是它不是这样工作的——FormData在其公共API中只有一种方法，那就是append。您几乎可以用它做的所有事情就是创建它，向其附加值，然后将其传递给 XMLHttpRequest。 如果您想以可以检查和操作的方式获取表单值，则必须采用老式方式：迭代输入元素并逐一获取每个值，或者使用由其他人编写的函数，例如jQuery 的。这是一个 SO 线程，其中包含一些方法：How can I get form data with JavaScript/jQuery? 根据 MDN 文档中的 FormData 实现FormData的对象可以直接在for...of结构中使用，而不是entries(): for (var p of myFormData)相当于for (var p of myFormData.entries())。 迭代FormData.entries()对我来说不起作用。 这是我检查 formData 是否为空的方法： var isFormDataEmpty= true; for (var p of formData) { isFormDataEmpty= false; break; } 迭代 formData 会为您提供上传的文件，您可以使用它来获取文件名、文件类型验证等。

如何将多个文件从 Angular 作为 FormData 发送到 Spring Boot 作为 MultipartFile[]？

我下面的代码用于单个文件上传，但我试图一次将多个文件从 Angular 发送到 Spring Boot。在 Spring Boot 中将多个 formdata 发送到 ArrayList 会导致 null，...