form-data 相关问题

FormData是一个JavaScript对象接口,旨在更轻松地在Ajax中构建multipart / form-data。

多部分表单解析错误 - 多部分中的边界无效:无

我很沮丧,找不到解决方案: 我正在使用 AngularJS 和 NodeJS 创建一个项目。我从 Node JS 中的 Angular 端获取图像数据,并将这些数据发送到进一步的 API。我遇到了错误...

回答 6 投票 0

将 Image 文件从 React 上传到 Rails 服务器

我正在尝试使用 React 中的 FormData 上传一个简单的图像文件并将其发送到我的 Rails 7 API,因为我读到只有在上传文件时才可以使用它。 这就是我的代码的样子 常量

回答 1 投票 0

如何在 C# 中创建 POST 到 BMC REMEDY API 上的端点,以使用表单数据中提交的文件创建票证?

我有这个问题。我必须向 bmc API 上的端点提交(或不提交)文件。 带有 VALUE:data_entry.txt 的 KEY:entry 是与值一起发送的 SON,与正文相同。 ...

回答 3 投票 0

使用多部分形式将文件上传到使用 Fastify 多部分的 Shopify 文件

我将 Fastify-multipart v5.3.1 与 fastify v3 一起使用(出于兼容性原因),我使用它将文件从客户端上传到服务器,然后从服务器上传到 Shopify。 从客户端到我们的服务器...

回答 1 投票 0

如何上传多张图片到imgbb并通过响应获取链接?

我正在通过react-form-hooks获取表单数据 我正在通过react-form-hooks获取表单数据 <div> <input multiple {...register("img", { required: "Image is Required", })} type="file" className="file-input file-input-bordered file-input-error w-full" /> </div> 但是我无法将多个图像文件附加到 formData 并将我发送到 imgBB 来获取图像 URL const { register, handleSubmit, formState: { errors }, } = useForm(); const handlePostAd = (data) => { const image = data.img; const formData = new FormData(); for (let i = 0; i < image.length; i++) { formData.append(`image${i}`, image[i]); } const url = `https://api.imgbb.com/1/upload?key=${process.env.REACT_APP_imgbb_key}`; fetch(url, { method: "POST", body: formData, }) .then((res) => res.json()) .then((imgData) => { toast.success("Image uploaded"); console.log(imgData); }); }; 我期待通过文件输入上传到 imgBB 的图像 URL 链接数组 我也在尝试做同样的事情,这是你的解决方案 创建此组件,以验证并上传图片到imgBB import sendAlert from "./sendAlert"; import uploadImage from "./uploadImage"; import { v4 as uuidv4 } from 'uuid'; const validateAndUpload = async (imageFiles) => { const uploadPromises = []; for (let i = 0; i < imageFiles.length; i++) { const imageFile = imageFiles[i]; if (!imageFile) { continue; // Skip empty or undefined files } if (!imageFile.type.startsWith('image/')) { sendAlert(`Invalid image file (${i + 1}): Please select a valid image file.`, "error"); } else if (imageFile.size > process.env.REACT_APP_MAX_IMAGE_SIZE_IN_BYTES) { sendAlert(`Image file (${i + 1}) size exceeds the allowed limit.`, "error"); } else { const uploadPromise = (async () => { try { const data = await uploadImage(imageFile); const img = new Image(); img.src = data.imageUrl; await new Promise((resolve) => (img.onload = resolve)); return { src: data.imageUrl, key: uuidv4() }; } catch (error) { throw new Error(`Failed to upload image (${i + 1})`); } })(); uploadPromises.push(uploadPromise); } } try { const updatedArray = await Promise.all(uploadPromises); return updatedArray; } catch (error) { sendAlert(error.message, "error"); return []; } }; export default validateAndUpload 对于 uploadImage() 函数使用这个 import axios from "axios"; import sendAlert from "./sendAlert"; const uploadImage = async (img) => { try { let myApiKey = process.env.REACT_APP_IMGBB_API_KEY let formData = new FormData() formData.append('image', img) const { data } = await axios.post(`https://api.imgbb.com/1/upload? key=${myApiKey}`,formData) let imageUrl = data.data.display_url let deleteUrl = data.data.delete_url return {imageUrl,deleteUrl } } catch (error) { sendAlert(error, "error") return null } }; export default uploadImage 这就是如何使用 validateAndUpload 函数 const register = async (e) => { const imageFiles = e.target.files; let updatedArrayToBeSubmit = [...imagesArray]; setImageLoading(true) await validateAndUpload(imageFiles).then((imgObjs) => { updatedArrayToBeSubmit = [...updatedArrayToBeSubmit, ...imgObjs]; }) .catch((error) => { sendAlert("Image upload and processing failed:", "error") }); setImagesArray(updatedArrayToBeSubmit); };

回答 1 投票 0

SvelteKit 表单操作,如何附加包含文件的对象列表?

我想将对象列表发送到我的 sveltekit 服务器。 Afaik,表单操作是正确的选择。 我有一个看起来像这样的对象列表 导出接口ExampleObjectWithFile { 编号:

回答 1 投票 0

来自 FormData 的 ExpressJS PUT 请求正文数据始终为空

每次我通过 React 上的表单向 API 提交 PUT 请求时,请求正文最终总是为空,并且我不完全确定数据发生了什么。 const handleEdit = async (e)...

回答 1 投票 0

表格数据为空,谁能解释一下为什么吗?

我试图更新 Mern Stack 应用程序中的数据,我发现表单数据是空的,我想知道为什么! 我获取了所有值并将它们传递到函数更新中以更新数据,然后我输入...

回答 2 投票 0

如何将 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) } ... }

回答 2 投票 0

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

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

回答 1 投票 0

比较 javascript FormData 对象

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

回答 3 投票 0

新的FormData返回空对象

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

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

使用 React 和 .Net Core 上传文件

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

回答 1 投票 0

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>

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.