如何使用formdata react native将图像数组添加到服务器？
在React Native中，可以使用FormData对象将图像数组添加到服务器。FormData是一种键值对的数据结构，可以方便地将数据以表单的形式发送到服务器。
以下是使用FormData在React Native中将图像数组添加到服务器的步骤：
- 首先，需要确保安装了react-native-image-picker库，该库可以用于选择图像。 可以使用以下命令进行安装：
- 首先，需要确保安装了react-native-image-picker库，该库可以用于选择图像。 可以使用以下命令进行安装：
- 或
- 或
- 在React Native项目中，使用以下导入语句导入react-native-image-picker库：
- 在React Native项目中，使用以下导入语句导入react-native-image-picker库：
- 创建一个函数，用于选择图像并将其添加到服务器。以下是一个示例函数：
- 创建一个函数，用于选择图像并将其添加到服务器。以下是一个示例函数：
- 该函数中，首先创建一个FormData对象formData。然后使用ImagePicker.showImagePicker函数选择图像，并将选中的图像添加到formData中。最后，使用fetch函数将formData发送到服务器。
- 注意：YOUR_SERVER_URL应该替换为实际的服务器URL。
- 在React Native界面中，可以通过触发某个事件（例如按钮点击）调用uploadImagesToServer函数：
- 在React Native界面中，可以通过触发某个事件（例如按钮点击）调用uploadImagesToServer函数：
这样，当用户点击上传图像按钮时，会触发uploadImagesToServer函数，选择图像并将其添加到服务器。
关于React Native中使用FormData将图像数组添加到服务器的步骤，这里提供了一个简单的示例。具体实现可能会因具体需求而有所变化，请根据实际情况进行调整。
腾讯云相关产品：可以使用腾讯云的对象存储服务COS来存储上传的图像。您可以通过以下链接了解有关腾讯云COS的更多信息和产品介绍： https://cloud.tencent.com/product/cos
相关·内容
我用react-native-camera拍照，它会像这样保存在手机里 file:///data/user/0/xxx/cache/Camera/4b1bde90-fa5e-4f91-aac1-029a8b67b3fc.jpg 现在我想把这个图片上传到服务器上，我的API方案如下 const formData = new FormData();
formData.append('file', file); // should be binary, but I don't know how to read image file as binary to
浏览 329提问于2020-06-15得票数 1
3回答
反应本机上传文件
、、
是否可以使用FormData将文件(图像)上传到具有react本机的服务器上？试图像这样使用它：
const data = new FormData();
data.append('file', {uri: 'file://' + fileObject.uri, name: 'image.jpg', type: 'image/jpg;'});
const request = {
method: method,
mode: 'cors',
credentials: 'include&#
浏览 9提问于2017-05-19得票数 1
回答已采纳
我使用react-native-image-picker获取图像详细信息，并尝试在https后端服务器中上载。请求不成功，并引发网络错误。它没有建立与后端服务器的连接。问题在于我正在发送的formdata。如果我漏掉了，你能给我建议一下header和其他信息吗？
export const postImage = async state => {
let formData = new FormData();
formData.append('image', {
uri : state.photo.uri,
type: st
浏览 6提问于2020-04-05得票数 0
我使用的是对图像的反应-本机-图像-裁剪器，我可以使用相同的code....whereas显示和上传同一插件从图片库获取的图像，我可以用相同的plugin...but显示相机拍摄的图像，不能将它们上传到服务器。
我得到的错误是
Error: Request failed with status code 500
at createError (C:\Repos\247client\node_modules\axios\lib\core\createError.js:16)
at settle (C:\Repos\247client\node_modules\axios\lib\
浏览 0提问于2019-05-22得票数 0
我正在使用React Native版本的0.35.0，但还没有找到一种从设备上传图像到后端服务器的好方法。我可以很容易地获取设备上图像资产的URI：
我想发送一个POST到远程服务器，这样我就可以将它保存在DB (或S3)中。
const data = new FormData()
data.append('image', image)
// TODO: send this to server
但是，我只能访问映像的uri。如何抓取要附加到FormData的实际文件并将其发送到服务器？
这是一个相关的GH问题：
浏览 0提问于2016-10-18得票数 1
2回答
我正在用react-native做一个应用程序。现在，我正在尝试从移动设备向服务器(Node Js)发送图像。为此，我使用了react-native-image-picker。问题是，当我发送图像时，它保存了一个文件，但它是空的，不包含照片。我认为问题可能是服务器无法访问图像的路径，因为它在不同的设备上。但我不知道我该怎么做。
React-Native：
openImagePicker(){
const options = {
title: 'Select Avatar',
storageOptions: {
s
浏览 0提问于2017-05-09得票数 0
我在一个向导中使用react-native-image-crop选择器和react-redux。在此向导的一个步骤中，用户上传他/她的图像，并最终将向导数据提交到服务器。所以我像这样使用表单数据：
let formData = new FormData();
files?.forEach((f) => {
let pathParts = f.path.split('/');
let file = {
uri: Platform.OS === 'android' ? f.path : f.path.r
浏览 1提问于2020-05-19得票数 1
我想上传一个从rejection本地(cli不带expo)到节点服务器的图像，我尝试使用带有formData文件的axios不被穆特识别，然后我尝试使用fetch将工作图像存储在服务器中，但在前面我得到了拒绝的承诺：
const postDocument = (doc) => {
//i used react-native-document-picker to pick document(doc) i logged it and it works
const url =`${api}/sendImage`;
const formData = new FormData();
浏览 3提问于2022-02-28得票数 0
回答已采纳
使用react-native-image-picker和react-native-image-resizer包，我从设备上的图库中选择了图像，并尝试上传这张图像。我使用axios multipart/form-data将图像上传到后端服务器。在Android设备上上传图片成功，但在模拟器上上传失败，没有任何响应或错误。 这是我的一些代码。我在控制台中没有得到任何日志。 let formBody = new FormData();
formBody.append('json', JSON.stringify(userBody));
//userBody is json requ
浏览 42提问于2020-10-21得票数 1
1回答
我正在开发一个React本地应用程序。作为后端，我正在使用DJango DRF。我试图为在后端创建一个新元素发出POST请求，这是我在React中的代码：
**API.JS**
const routes = {
accounts: {
get: () =>
requestHelper({
method: "get",
url: "accounts/",
}),
post: (data) =>
requestHelper({
data,
浏览 3提问于2020-11-04得票数 0
我很难用本机拍摄照片，并将缓存映像发送到我的node.js后端服务器，然后我的后端服务器将其附加到一个formdata对象并将其发送到我的webservice。我搜索了很多关于前端和后端之间的操作，但没有找到确切的真实答案。
我的快速节点后端服务器用multer获取图像。
我有如下所示的反应本机前端代码，以便将作为expo的takePictureAsync方法返回对象的图像数据发送出去：
客户端
//react native client side
const takePicture = async () => {
if (cameraRef.current) {
co
浏览 7提问于2022-01-11得票数 0
回答已采纳
我正在尝试使用React Native axios上传图像。但是我得到了这样的回应。我尝试了所有的解决方案，但都不起作用。我正在使用react-native- image -picker来获取图像 { result: null,
message: 'Wrong access',
error: true,
type: 'command_not_found' } 以下是我的代码 ImagePicker.showImagePicker(options, (response) => {
let formData = new
浏览 19提问于2019-10-18得票数 1
2回答
提交时文件上载为空
、、、、
我正在尝试在一个对象中使用Axios上传图像。我可以使用new FormData()获取文件并将其放入对象中，但是提交图像是空的。如何将对象中的文件与其他JSON数据一起上传？ import React, { useState } from 'react';
import axios from 'axios';
function UploadFiles() {
const [submitFile, setSubmitFile] = useState({});
const handleChange = e => {
setSubmitF
浏览 11提问于2020-11-01得票数 2
回答已采纳
1回答
是否可以使用FormData使用react-native将文件(图像)上传到服务器？尝试像这样使用它：
var data = new FormData();
data.append('file', file);
console.log(JSON.stringify(data));
var id = 5;
fetch('http://192.168.1.104:3000/app/complaint/uploadFile?id='+id,{
method:'POST',
body: data,
headers:
浏览 4提问于2017-12-27得票数 0
回答已采纳
当我将“内容-类型”设置为“多部分/表单-数据”时，我会得到以下错误。
下面是我的密码-
const formData = new FormData();
formData.append('org_id', org_id);
formData.append('ans', userAns);
formData.append('remark', userRemark);
formData.append('img', userImg);
files.forEach(file => {
formData.append(&#
浏览 5提问于2021-12-21得票数 0
我有一个问题，上传图像从我的相机胶卷或我的API。这是我目前使用的代码。我能够从相机胶卷和相机中获得图像数据。我只是在将数据发送到服务器时遇到了一个问题。我不知道问题出在哪里。但是我认为我的formData()中有问题。
此外，在高级我检查我的api，它工作，如果我上传图像从邮递员或高级rest客户端，那么它是完美的。不知道为什么它不能与react native一起工作。
我正在使用的版本
"react"："16.0.0-beta.5"，"react-native"："0.49.5"，"react-native-camer
浏览 1提问于2017-11-27得票数 1
我正在使用React Native和Expo SDK 37。我的请求如下所示：
export const uploadMedia = async (fileData, s3Data) => {
console.log(fileData.type)
let formData = new FormData();
formData.append('key', s3Data.s3Key);
formData.append('Content-Type', fileData.type);
formData.append(
浏览 3提问于2020-05-07得票数 0
回答已采纳
我正在使用EXPO-CLI的图像选择器上传图像，并让它们呈现在客户端，但现在正在尝试将它们发送到我的Laravel REST API并将它们移动到文件夹中。问题是，laravel无法通过react-native将我的formdata图像识别为文件。
React原生代码：
const [image, setImage] = useState('');
const [data, setData] = useState('');
pickImage = async () => {
let result = await ImagePicker.lau
浏览 9提问于2019-10-20得票数 0
2回答
我必须将多个图像发送到映射到多个键(变体)的服务器。假设我有两个变量，所以一个数组是变量，即variant = [a ,b]和另一个数组应该包含与每个变量对应的图像(多个图像)，例如images = [[File, File], [File, File, File]]，所以这两个嵌套数组按照索引链接到变量数组，即variant[0]具有图像images[0]。类似地，images[1]中有variant[1]的图像(三个图像)。 现在，我必须将这些数据从前端发送到后端，这是在React.js中，它的变体很简单，就像这样。 const formData = new FormData()
con
浏览 51提问于2021-05-06得票数 0
我是编程新手，我正处于React Native和Laravel的学习阶段。我正在做一些实践项目，我需要从我的React Native应用程序上传一张图像到Laravel服务器，然后从服务器上我可以将它保存在云中或其他什么地方。我可以使用expo- image -picker上传图片并将其显示在应用程序上，但我似乎无法使用formData将其发布到服务器上。 还有，为什么当I console.log formData时，它会显示一个空对象？ 加载并上传图像的代码： pickImage = async () => {
let result = await ImagePicker.launc
浏览 15提问于2020-10-22得票数 1
回答已采纳
我使用的是react-native-camera，在react-native中获取二进制数据时遇到了问题。我需要这个能够上传图像到我们的后端。我唯一设法得到的是镜像的uri，然后可能将其作为FormData发送到服务器，但不建议这样做，因为这将需要对我们的后端进行一些基础设施更改。
有没有人知道关于这个问题的解决方案或小贴士？
任何想法或帮助都是非常感谢的。
浏览 1提问于2018-02-12得票数 9
回答已采纳
我试图使用TypeScript和Yarn工作区使用"server“和"client”文件夹创建一个monorepo项目。编译"server“文件夹而没有创建"client”文件夹的效果很好，但是当我创建"client“文件夹时，编译"server”文件夹使TypeScript想要编译"client“的node_modules文件夹，给出了错误，但仍然进行了编译。
这些错误如下：
../../../../.config/yarn/global/node_modules/typescript/lib/lib.dom.d.ts:5353:11
浏览 1提问于2019-08-22得票数 3
回答已采纳
我正在尝试将一个项目发布到我的服务器。我使用React Native作为前端，使用Laravel作为后端。我已经尝试了很多次，但它总是给我网络请求失败。虽然我正在邮递员身上试用它，但它工作得很好。 这是我的演示代码： var dummyArray = [
{
type: "image/jpeg",
uri: "file:///storage/emulated/0/Android/data/com..../files/Pictures/4cbc8fa0-5978-42a6
浏览 31提问于2021-11-18得票数 0
1回答
我是react的新手，我想在react网页中显示一组图像。该阵列具有静态数量的图像。
render: function() {
console.log("edit");
return (
<div>
<Button bsStyle="info" id="qslist" onClick={this.show}>View</Button>
<Button bsStyle="info" id="qslist&
浏览 15提问于2017-02-23得票数 0
我目前正在用React Native 0.62.2为Android构建一个简单的应用程序。在尝试将图片上传到我的fetch (它是用node.js/express编写的)时，我在使用axios 0.19.2 (甚至是API)时遇到了一些问题。POST请求的格式如下： // UserService.js
export const postNewUser = async (newUser) => {
try {
const photo = {
uri: newUser.avatar.uri,
type: 'im
浏览 35提问于2020-05-04得票数 1
React Native IOS应用程序，希望从设备上传映像。RN 0.39.2
客户端：
const formData = new FormData()
formData.append('files', file)
formData.append('type', 'image')
fetch(API_HOST+UPLOAD_AVATAR,{
method:'post',
headers: {'Content-Type':'multipart/form-data;boundary=6ff4
浏览 8提问于2017-03-10得票数 6
我尝试在react-native中使用axios上传一个文件，并使用以下示例代码将其上传到web
const obj = {
hello: "world"
};
const json = JSON.stringify(obj);
const blob = new Blob([json], {
type: 'application/json'
});
const data = new FormData();
data.append("document", blob);
浏览 0提问于2018-10-16得票数 0
我在测试我的thunk时遇到了问题，因为我的许多API调用都在使用FormData，而我似乎不知道如何在测试中模拟这一点。我使用的是Jest。
我的设置文件如下所示：
import 'isomorphic-fetch';
// Mocking the global.fetch included in React Native
global.fetch = jest.fn();
// Helper to mock a success response (only once)
fetch.mockResponseSuccess = body => {
fetch.mo
浏览 27提问于2017-08-23得票数 9
1回答
大家好，大家好，我想发送Formdata，其中包括一些字符串和一个图像文件，使用到节点服务器和mongo，有人能解释我如何使用react本地expo来完成这个任务吗?我已经尝试过几种方法，但是我没有成功，但是我能够使用后端发送数据，但是我不知道如何发送，如何发送，使用but本机世博会？
浏览 3提问于2022-05-30得票数 0
回答已采纳
我使用将多个文件上载到Sails.js服务器。由于react-下拉区域给出了删除文件的列表，所以我将它们附加到FormData对象中。这样，当请求到达服务器时，req.file('myfile').upload()将无法工作，因为页面上没有任何input[type=file]，而且我正在使用AJAX。我的问题是：是否有任何方法来处理FormData上传，或者我需要使用 之类的方法？。
浏览 3提问于2017-07-03得票数 1
我一直在寻找我能找到的所有问题，但看起来没有人有我的问题。
我正在运行react-native 39，我想上传一张图片。看起来可以使用FormData上传。
/**
* Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests
* with mixed data (string, native files) to be submitted via XMLHttpRequest.
*
* Example:
*
* var photo = {
* uri: uriFromCame
浏览 2提问于2016-12-11得票数 2
我使用fetch将图像发送到服务器。在iOS上，所有的东西都能像预期的那样工作，但在安卓系统上，我的请求却被破坏了。
我从世博图像选择器获得的uri，在IOS上一切都像预期的那样工作。
const form = new FormData();
form.append('file', {
uri: imageUri,
name: 'file.jpg',
fileName: 'file',
});
fetch(api,{
method: 'post'
浏览 4提问于2020-11-13得票数 2
回答已采纳
这是我想要发送到服务器的数据结构： {
attachment: [File],
foo: String,
bar: String
} 正如您所看到的，我正在尝试发送一个文件数组以及一些其他数据。为了存储所有这些数据，我使用了JavaScript官方API中提供的FormData()构造函数。我像这样填充formData： for (let i = 0; i < this.state.files.length; i++) {
let f = this.state.files[i];
this.formData.append('attachment
浏览 160提问于2019-01-07得票数 1
回答已采纳
在我的React Native项目中，我使用react-native-image-picker上传图片。在这里，我使用formData上传图片。图像地址是存在的，但当我通过控制台控制formData时，它显示{}。我不知道为什么会发生这种事。代码如下：
uploadImageAsync = async (imgUri, token) => {
let apiUrl = 'url';
let formData = new FormData();
let uriParts = imgUri.split('
浏览 2提问于2020-07-20得票数 2
我在尝试将图片从React Native上传到AWS服务器时遇到了一些问题。下面是我的代码：
async function uploadImageAsync(uri) {
console.log(uri);
let apiUrl = '...'
let uriParts = uri.split('.');
let fileType = uri[uri.length - 1];
let formData = new FormData();
formData.append('image', {
uri,
na
浏览 4提问于2018-01-02得票数 0
1回答
我正在尝试上传一个图像到Django后端服务器与React Native。 const addPostHandle = () => {
const formData = new FormData()
formData.append("image", {
name: "img",
type: image.mime,
size: image.size,
uri: Platform.OS === "android" ? image.path : image.path
浏览 28提问于2020-10-17得票数 2
回答已采纳
正如标题所说，我正在尝试将从我的react原生应用程序上的expo- image -picker拍摄的图像上传到使用multer作为中间件的express.js服务器上。我上传图片的代码如下所示： var data = new FormData();
data.append('image', {
// @ts-ignore
uri: listing.image.uri.replace('file://', ''),
name: listing.title,
type: listing.image.type
浏览 79提问于2021-05-10得票数 0
回答已采纳
我对原生反应还很陌生。我想在react native中将图像上传到服务器。我想以分片的格式上传。所以请帮帮我。是否可以上传图像到服务器的多部分格式是肯定的，然后如何。我在谷歌上查看和搜索了很多东西，但我没有找到任何关于将图像分成多部分上传到服务器的答案。请帮帮忙。谢谢。
浏览 81提问于2021-02-26得票数 0
回答已采纳
我正在尝试通过获取api上传图像，但是在真实设备上获得网络请求失败了。我也尝试了很多来自谷歌的建议，但是没有对我有任何帮助。
我的依赖关系是：
"react-native": "0.62.0",
"axios": "^0.19.2",
"form-data": "^3.0.0",
"react": "16.11.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
浏览 7提问于2020-04-08得票数 4
回答已采纳
1回答
我有一个React Native应用程序，它使用fetch上传一些文本数据和图像。我们最近注意到并不是所有的图像都保存在服务器上。启动Charles后，我发现一些图像看起来是畸形的，不确定是什么原因造成的。 通过测试，我尝试了不同的图像，相同的图像等，但似乎仍然有这个问题。在下面的屏幕截图中，您可以看到请求以及如何只有一个图像具有正确的数据。我不确定这些符号是什么意思，也不知道它们为什么在那里.. ? 正如您在代码中看到的，我以完全相同的方式添加了这两个图像。 // data is my object that contains job info, image meta info,
浏览 61提问于2019-06-13得票数 0
1回答
我使用Elixir Phoenix作为我的后端，并创建一个api来上传图像。我正在使用Waffle十六进制包来处理上传。
所以我有一个api
localhost:4000/uplaod_avatar/
并在控制器中运行此函数：
def upload_avatar(conn, params) do
scope = Repo.get(User, 1)
case AvatarUploader.store({ params["image"], scope }) do
{:ok, filename} ->
IO.puts(filena
浏览 1提问于2021-04-14得票数 0
1回答
上传多个图像时，网络请求失败
、、、、
我正在通过fetch api上传图片。在上传时，如果选择了单个图像，它就会工作得很好，但是如果选择了多个图像，则会产生错误的[TypeError: Network request failed]。我也尝试过评论initializeFlipper和这个答案。服务器接收一系列图像..。当选择多个图像时，这就是images[]的样子
[{"height": 900, "mime": "image/jpeg", "modificationDate": "1649410153000", "path":
浏览 2提问于2022-04-08得票数 0
当我向使用multer的节点/快速服务器发送图像时，我能够将图像保存到我的“上传”文件夹中，其中包含服务器端代码和邮递员的请求。
server.js
const express = require("express");
const app = express();
const cors = require("cors");
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
const multer = require("
浏览 5提问于2022-06-06得票数 0
我正在尝试将blob图像发送到服务器，但react native显示错误网络失败错误。
get_data = async () => {
let file = new FormData();
fetch("https://jzzqf.sse.codesandbox.io/", {
method: "POST",
headers: {
"Content-Type": "multipart/form-data; charset=utf-8",
//"Content-Type":
浏览 14提问于2020-02-11得票数 0
1回答
我对原生反应还很陌生。我已经创建了一个表单。其中我添加了3张图片和1个数字签名。然后我将这个图像发送到服务器。但是我得到了base64的响应。那么如何将base64响应转换为图像。然后使用formdata multipart将此图像发送到服务器。 以下是我的代码 saveSign = () => {
this.sign.current.saveImage();
};
resetSign = () => {
this.sign.current.resetImage();
};
_onSaveEvent = (result) =>
浏览 125提问于2021-03-22得票数 0
我正在使用react-native- image -crop-picker我可以从图库中选择图像，但是当尝试通过表单数据上传到服务器时，但是图像没有上传到服务器，它在server.Can上显示为空白。有人建议我如何使用react-native- image -crop-picker上传多张图像到服务器吗?这将是如此appreciable.Thanks。
浏览 51提问于2019-12-17得票数 4
我试图创建上传配置文件图像的方法，帮助用户上传他们的个人资料图片在网站上，但我有麻烦，我不知道如何将图像从客户端到服务器，并使那些图像存储在云或防火墙。
我的路线是这样的: ProfileAPI.js
const express = require("express");
const router = express.Router();
const { body, param } = require("express-validator");
const { catchErrors } = require("../erro
浏览 7提问于2021-03-25得票数 0
5回答
我正在尝试捕获一个图像，并将其上传到服务器上，但是当我发出http请求时，我会得到以下错误：
TypeError:网络请求失败
这是我的代码，我遵循了本教程：
import React from 'react';
import {View, Image, Button} from 'react-native';
import ImagePicker from 'react-native-image-picker';
export default class App extends React.Component {
state = {
浏览 4提问于2020-06-18得票数 7
1回答
我需要将图片直接上传到S3存储桶中。我正在使用react native和react-native-image-picker来选择一张照片。这将返回一个本地图像uri。这是我现在的代码。 ImagePicker.showImagePicker(options, response => {
var bodyFormData = new FormData(); // If I don't use FormData I end up
// uploading the json not an imag
浏览 24提问于2019-10-05得票数 0
我正在尝试使用axios和一个预先签名的url将视频从我的IOS设备库上传到S3。我已经确定axios/s3部分工作得很好，但问题来自于我从'react-native-image-picker‘收到的uri。 当我在react-native中录制视频时，视频uri可以在S3中正常上传，但是当我从我的图片库中抓取视频时，它会上传到S3，但它不是视频文件。 我使用react-native-image-picker从我的ios设备库中抓取视频uri。 import {launchImageLibrary} from 'react-native-image-picker';
浏览 53提问于2021-07-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
