如何将图像从React应用程序发送到api服务器
将图像从React应用程序发送到API服务器可以通过以下步骤完成：
- 在React应用程序中，首先需要使用HTML的<input>元素或者React的文件上传组件来允许用户选择图像文件。用户选择图像后，可以通过JavaScript获取到该文件。
- 在React应用程序中，可以使用Fetch API或者Axios等库来发送HTTP请求到API服务器。在发送请求之前，需要将图像文件转换为可传输的格式，例如Base64编码或者FormData对象。
- 将图像文件转换为Base64编码可以使用FileReader对象。首先，创建一个新的FileReader实例，然后使用readAsDataURL方法读取图像文件。在读取完成后，可以通过监听load事件获取到Base64编码的图像数据。
- 示例代码如下：
- 示例代码如下：
- 如果选择使用FormData对象来发送图像文件，则可以创建一个新的FormData实例，并使用append方法将图像文件添加到FormData对象中。FormData对象可以自动设置正确的Content-Type头部，并且可以处理多个文件上传。
- 示例代码如下：
- 示例代码如下：
- 在发送HTTP请求时，需要指定API服务器的URL、请求方法（例如POST或者PUT）、请求头部（例如Content-Type）、请求体（包含图像数据）。根据API服务器的要求，可能还需要提供其他的请求参数。
- 示例代码如下（使用Fetch API）：
- 示例代码如下（使用Fetch API）：
- 示例代码如下（使用Axios）：
- 示例代码如下（使用Axios）：
以上是将图像从React应用程序发送到API服务器的基本步骤。具体的实现方式可能会根据具体的需求和技术栈有所不同。在实际开发中，还需要考虑图像的大小限制、上传进度的显示、错误处理等方面的问题。
相关·内容
1回答
下一个用文件体获取JS数据
javascript、next.js、fetch-api、ipfs
我试图发送一个POST请求上传一个文件到我的IPFS服务器。但是，我不确定如何将文件上传到请求的正文中。我试过查看Fetch API中的示例，但是它们的示例显示了从表单上传的文件。在我的例子中，这些文件已经在我的目录中了。
更新:我已经根据上的文档修改了将POST请求发送到IPFS服务器的代码，现在我能够成功地发送请求。但是，我仍然无法从我的目录中获得"fileInput“变量来引用文件。只有当我有html表单时，当前的示例才能工作。
我尝试过nodejs库，但遇到了一些函数不可用的问题。从我所读到的情况来看，使用fs可能会引起某些安全问题。如果我能就此提出一些建议，我会很感激的。
浏览 6提问于2022-02-03得票数 0
1回答
当试图将图像文件上传到imgur时出现错误请求状态400
reactjs、typescript、api、uploading、imgur
我正在尝试从我的React应用程序上传图像文件。继续犯400个错误，我不明白为什么。这是我的TypeScript函数的React代码：
public setImage = (args: ChangeEvent<HTMLInputElement>) => {
const image = args.target.files[0];
let formData: FormData = new FormData();
formData.append("profileImage", image, image.name
浏览 6提问于2020-10-28得票数 0
1回答
无法用Pinata SDK将可读的流发送到IPFS-400错误请求和未处理的拒绝
sdk、buffer、imagedata
由于我的项目的性质，我有一个图像dataURL (不是一个实际的图像文件)，我试图通过皮纳塔SDK上传到IPFS。我已经将图像dataURL转换成一个缓冲区(数组)，并尝试了两种不同的方法，但它们都不起作用。这是我的代码：
样本1
var myBlob = new Blob([new Uint8Array(myBuffer)]);
var myReadableStream = myBlob.stream()
pinata.pinFileToIPFS(myReadableStream)
错误：未处理的拒绝(TypeError)：source.on不是一个函数
样本2
var myBlob = n
浏览 4提问于2021-11-25得票数 1
1回答
使用httpserver编写从请求中收到的图像文件
javascript、html、node.js、http
我用FormData从前端发送图像，这是从输入类型文件中得到的。
我将这个formData发送到我的API中，我试图在本地保存它，当我试图打开它时，它不会显示我的图像。每次文件来自请求时，我都会将其保存为PNG，只是为了尝试保存是否正确。(我也在发送png图像)
任何提示都将不胜感激，因为这是我第一次使用来自nodejs的本地http服务器。
前线：
const fileInput = document.getElementById('file')
const form = document.getElementById('form')
const handl
浏览 5提问于2022-02-12得票数 1
回答已采纳
1回答
使用未发送到正文的文件上传的react js fetch api
javascript、reactjs、api、fetch、fetch-api
以下是我的代码 let formData = new FormData();
// Update the formData object
formData.append(
"myFile",
this.state.product_picture,
this.state.product_picture.name
);
var options = { content: formData };
const token = JSON.par
浏览 10提问于2020-11-20得票数 1
回答已采纳
1回答
formdata.append()有问题
javascript、form-data
我正在尝试上传带有表单数据的文件。因此，我将图像数据附加到formdata对象中。但是我一直在犯错误：The laptop image field is required. (拼写'laptop_image‘是正确的)。
我还必须附加一些其他数据，这些数据运行得很好。
const fileInput = document.getElementById('laptop_image');
async function handleFormSubmit(event) {
event.preventDefault();
const form = documen
浏览 3提问于2022-09-04得票数 0
回答已采纳
2回答
React图像上传不能通过fetch工作
reactjs、api
const submitData = (ev) => {
ev.preventDefault();
let formData = new FormData();
formData.append("topicName", topicName);
formData.append("topicMessage", topicMessage);
formData.append("pictures", pictures);
const reques
浏览 9提问于2021-06-05得票数 0
2回答
如何在下一个js中上传图像并保存它？
javascript、file-upload、next.js
如何在next.js API路由中上传图像并将其保存在公用文件夹中？我已经准备好前端了。我使用普通的JavaScript将图像上传到端点。这是用于上传图像的onSubmit函数。如果我在这里做错了就建议我。主要的问题是我如何检索它？
const onSubmit=async(e)=>{
e.preventDefault();
const fd=new FormData()
fd.append('myfile',image.name)
let res=await fetch(`http://localho
浏览 15提问于2022-06-17得票数 1
回答已采纳
4回答
如何在nodejs中恢复上传的文件
javascript、node.js、reactjs、api、react-redux
我有一个redux-从提交开始，控制台日志如下所示
{
id: "x",
parentId: "b",
editing: true,
logo: FileList,
}
Logo FileList包含我上传的文件名和文件，我想
0: File(19355) {name: "11964821.jpeg", lastModified: ......
使用fetch发送到nodejs，图像包含我的文件和上面的数据
function Update(image) {
const requestOptions = {
浏览 0提问于2019-02-21得票数 0
回答已采纳
1回答
如何在POSTing到服务器之前正确地将文件附加到formData？
javascript、angularjs、ajax、file-upload
我一直在关注这个，但是还没有理解这个是如何工作的。
我的输入表单
<input type="file" id="file-id" class="w300px rounded4px" name="file" placeholder="PDF file">
<button class="btn-upload-pdf" ng-click="asub.uploadPDF()">Upload</button>
upload按钮的功能如下：
this
浏览 2提问于2017-02-04得票数 5
回答已采纳
1回答
将文件上载到React/Express中
jquery、node.js、reactjs、express
我是新的反应和Node.js。但是，我正在尝试创建一个组件，允许用户上传文件(从React应用程序)，然后将其发送到我的Express服务器(通过我构建的API )，然后让服务器将文件保存在本地。应用程序和服务器都在本地主机上运行。这个设置的方式是我有一个处理Fileupload的组件。它接受该文件并将其发送到我的上下文文件。然后，上下文文件发出API请求。但我不确定这是否正确？我想我正在将文件发送到我的服务器应用程序，但是我收到一个错误，上面说没有定义FormData。另外，我试图不使用像Axios这样的外部库，因为我不想依赖第三方库来执行一个操作。这是我的代码：
组件：
import Re
浏览 6提问于2022-11-29得票数 0
回答已采纳
1回答
如何在Angular 4中以formdata格式发送多幅图像
angular、image、multipartform-data
我想以formdata格式发送多个图像，到目前为止，我只发送base65格式的单个图像，但在这里我必须发送最多5个图像以及formdata格式。 我正在尝试解决这个问题，但我无法实现它。 我的代码如下.ts所示 handleFiles= function (fileInput: Event) {
if (fileInput.target['files'].length>1) {
var files = Array.from(fileInput.target['files']);
this.au
浏览 3提问于2019-05-16得票数 0
3回答
React本地多部分照片上传在android中不起作用
android、react-native、fetch、multipartform-data
我试图在react本机中使用fetch multipart upload将图像文件发送/上载到后端服务器，但是获取多部分表单数据上传并不适用于android，但是我尝试了不同的示例。
图像上传多部分表单数据API是基于php和它的工作为iOS反应-本机应用程序。
我正在使用反应-本机-照片上传库拍摄图像。
storePicture(PicturePath:string) {
console.warn(PicturePath);
if (PicturePath) {
const apiUrl = `${Constants.APIHOST}updateprofileimage.php`
浏览 0提问于2019-02-25得票数 2
回答已采纳
2回答
反应，节点js，mongoDB -如何用FormData来发布、放置、删除？
node.js、reactjs、post、fetch、axios
如何使用格式数据创建邮政服务？
我用Axios发送了格式数据。但是，节点快递服务器上的“req.body.title”值是空的。因此，现在我要发送以下格式的fetch。但是我需要将文件上传到服务器，所以我想使用formData发送它。
let bodys = 'title=a1&contents=b'
fetch("http://localhost:5000/test", {
method : 'post',
headers : {
'Content-
浏览 0提问于2018-09-13得票数 1
回答已采纳
1回答
在表单提交前使用TinyMCE编辑器将图像作为基64保存
javascript、tinymce
我正在制作一个Javascript应用程序，它收集TinyMCE编辑器的内容，并在一个帖子中将其全部发送到服务器。我试图允许用户将图像上传到编辑器中，但是如果不将图像上传到服务器端的图像处理程序，我就想不出如何做到这一点。我需要一个方法来提交所有的图片和文字在一个帖子。
我对处理图像不太了解，但我的想法是，我可以通过收集图像作为base64字符串并将它们与html输入的其余部分一起发送来实现这一点。第一个问题:我的思路正确吗？
第二个问题:我如何做到这一点？我已经成功地将上传的图像编码为base 64，但是TinyMCE编辑器图像上传对话框仍然被打开，就好像它仍然在上传，即使我已经有了基本的6
浏览 17提问于2022-02-18得票数 0
1回答
通过JS获取API将图像上传到Imgur，浏览器取消。
javascript、fetch、imgur
我编写了，使用Javascript的Fetch API将其上传到一个特定的Imgur相册。应用程序无法上传，我不知道为什么，因为我实际上没有从服务器获得响应。浏览器似乎正在取消请求，而不是将其发送出去。
这是我的密码：
const form = document.querySelector('form');
form.addEventListener('submit', event => {
const fileInput = event.target.querySelector('input');
const
浏览 1提问于2018-01-30得票数 1
回答已采纳
2回答
Vue.js图像上载表单-数据
vue.js、form-data
我试着用Vue.js上传图片，然后用axios把它发送到服务器，但是我遇到了一些错误。 首先： 我正试着像formData一样发送它。不是base64格式。 以下是我的输入： <label>File
<input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
</label>
<button v-on:click="submitForm()">Upload</b
浏览 34提问于2019-03-16得票数 2
1回答
所需的请求部分不存在反应。
reactjs、spring-boot
我得到“所需的请求部分‘文件’是不存在的。”它对邮递员很好，但对反应js却没有作用。我试图在Spring启动restfull中调用一个端点。
遵循守则：
function sendUploadFileRequest(file, userName, caseRef) {
/* var formData = {
username: userName,
caseRef: caseRef,
file: file
}; */
let formData = new FormData();
formData.append('file', file)
浏览 2提问于2020-06-10得票数 0
1回答
用ajax将文件和原语类型上传到Web
jquery、ajax、api、asp.net-core
我目前正试图上传一个图像文件连同一个带有ajax的字符串到一个Asp.Net Core中，没有任何运气。
我看了一下：，认为在FormData对象中同时发送图像文件和字符串很容易，但是只接收到图像。
在javascript中，我会附加数据并用ajax帖子发送数据：
let formData = new FormData();
formData.append("code", "123");
formData.append("userFile", document.querySelector("#imgInput
浏览 1提问于2020-03-18得票数 0
回答已采纳
1回答
为什么图像不上传到服务器和反应？
reactjs
我必须上传图像与反应到服务器，但提出请求发送空图像对象。
这是设置图像状态的函数。
...
fileUpload(event) {
const companyState = {...this.state.company};
companyState['image'] = event.target.files[0];
this.setState({company: companyState});
}
...
这是上传图像的代码
...
<input type="file" name="image" className=
浏览 0提问于2018-11-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
