保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应文件上传:这里定义的一切!

关于React文件上传的简介

作为Web开发人员,您总是想开发一个允许您上传图像的应用程序。因此,上传图像是必须考虑的主要组成部分之一。 反应文件上传是创建完整应用程序的基本要求。所谓上传,实际上是指我们希望来自客户端计算机的用户想要在客户端服务器上上传文件。例如,它允许用户在各种社交媒体平台(例如Instagram,Facebook等)上从他们的设备上传文件(例如图像,视频等)。

就编程问题而言,实际上有许多方法可以实现文件上传功能。在本文中,我们将向您说明实现使用React上传单个文件的方法的最简单方法。  

提交要上传的文件时,将重新加载上传页面。如果您是React的新手,那么您必须使用这种通用样式在实验室上载文件。我们如何告诉您有更好的方法来实现呢?今天,如果您阅读本文并可以在您的网站中实现,那么文件上传的方式将永远改变。 

概括地说,我们上传图片的过程可以分为两个基本步骤:

  • 用户输入(选择文件):

为了允许用户选择文件,我们要做的第一步就是将标签添加到我们的App组件中。不要忘记将此标签的类型设置为 “文件”。  因此,在此之后,我们将需要一个事件处理程序以观察已带入文件的任何更改。每当用户选择一个新文件时,此事件处理程序都将起作用,此后,事件管理器将更新状态。

  • 将请求发送到服务器:

在存储了已经选择(处于状态)的文件之后,现在需要将其发送到服务器。我们可以用 要么 Axios。 之后,文件被发送到包装在名为的对象中的服务 FormData。 


引导应用程序:

对于一个相对较新的开发人员,文件上载的功能可能感觉像是一个非常复杂的主题,但对于不那么复杂的应用程序(例如,无需处理大量图像或视频并且没有任何文件优化的情况),上载文件与从一个位置复制文件并将其粘贴到另一个位置的概念没有什么不同。节点的Express框架还有助于我们将文件上传功能添加到我们的应用程序中。我们可以通过使用create-react-app轻松地创建前端来做到这一点,并且可以使用express-generator处理后端。

我们将从构建服务器开始,在服务器中可以使用相同的nodejs上载文件并进行表达。现在,让我们逐步完成整个过程,以确保我们最终拥有一个功能齐全的工作系统。 

 

创建要上传的Express服务器:

因此,在我们可以将React应用程序上传到任何服务器之前,创建一个可以上传到的服务器非常重要。因此,第一项工作就是使用node.js来实现文件上传服务器,并表示允许我们以多部分格式上传文件。 

设置项目:

为了建立一个新项目,我们需要做的是创建一个完整的新项目目录,其中将包含两个文件夹,并且这两个文件夹分别是app和server。下一步将是打开指向服务器目录的命令行,并使用npm init命令初始化一个新的npm-project。它的作用是要求您提供一些您可以传递的信息,或者甚至可以按Enter键,它将起作用。对于服务器而言,我们还将在服务器目录中需要两个JavaScript文件:server.js和upload.js。

 

外部依赖关系:

我们的服务器中总共有三个外部依赖项。第一个显然是富有表现力的。 Express是一个使我们很容易创建API的框架。可以使用以下命令进行安装:npm install express。 

并且由于我们需要从可能来自不同来源的每个应用程序访问API的原因,服务器必须允许跨域请求,因此需要一个名为CORS的简单模块。要安装它,我们可以使用以下命令:npm install cors。

事实上,表达本身在理解表单方面不是很有效,为此,“ formidable”库可以解决问题,并且非常易于使用。可以使用以下命令进行安装:npm install formidable。

设置基本Express服务器:

我们需要创建一个基本的express server.js文件,它非常简单:

 

启用CORS:

为了能够从其他来源的React应用程序中访问我们正在使用的API,需要启用Cors。我们需要通过创建选项对象来配置它以允许任何域。完成后,我们需要让Express知道如何结合使用cors-middleware和现有配置。

 

注册上传路线:

完成上述步骤后,需要配置用于上传文件的路由,为此,我们需要我们的upload.js文件,然后使用HTTP post方法注册路由器。

 

react-upload-file:

反应 Upload File是仅结构的现代文件上传组件,具有可自定义的用户界面并与React兼容。它还支持IE10 +,并且还支持IE(附加了node4 +的要求。安装也非常简单,只需要命令即可 npm安装react-upload-file -S。我们需要牢记的一些重要事项是,强烈建议使用箭头功能,并且如果设置查询,则将忽略baseURL中的查询。

为了使用react-upload-file,有一些基本选项(ReactUpladFile的属性),这些选项的属性如下:

 

  • baseUrl:它是字符串类型,是我们上传的基本URL。
  • 查询:它是对象或函数的一种,它表示附加在baseUrl之后的查询。当采用函数形式时,将使用其给定的返回值。
  • 主体:主体主要由除了文件之外还需要添加到formData的键值组成,当它为函数形式时,我们应使用其返回值。
  • dataType:它接受响应的类型,例如可以是json或文本格式。
  • 超时:确切表示名称所暗示的,即请求的超时。回调函数uploadError将被触发,其结果是,带有“超时”消息的TIMEOUTERROR类型的对象将作为参数返回给我们。如果默认值为0,则表示没有限制。
  • numberLimit:限制一次可以上传的文件数量,此处0表示可以上传的文件数量没有限制。 
  • userAgent:用于设置需要同构渲染的服务器端应用程序的userAgent字符串。

结论:

在本文中,我们了解了文件上传功能在React中的重要性,并且还了解了即使从头开始也可以实现的功能。 反应非常通用并且很流行,这就是为什么我们针对一个问题有很多不同的解决方案的原因。事实证明,存在如此之多的用于React的现有文件上传API以及我们在这里看到的一个示例就是react-upload-file的示例,其用途非常出色。

尽管对开发人员来说使自己的API非常好,但在节省时间和快速完成工作方面,使用预先存在的API会很有帮助。因此,要在React中上传文件,您可以使用社区中已经可用的API来节省时间,甚至可以根据个人喜好从头开始构建自己的API。 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。