如何使用React和Node设置文件上传

免责声明

这篇文章包含产品的会员链接。 对于通过这些链接进行的购买,我们可能会收到佣金。

升级您的JavaScript技能。
仅仅几个下午就可以学习React.js。

Wes Bos提供的优质分步培训课程,可以帮助您构建真实的React.js + Firebase应用程序和网站组件。 立即开始学习

使用React进行前端Web开发 Coursera
香港科技大学的React前端Web开发。 本课程探讨… click.linksynergy.com

让我们开始

文件上传应用程序应包含两个组件:

  1. 前端:让用户选择文件。
  2. 后端(API):前端可以向其发送文件。

如果您使用一项服务来存储文件(例如Amazon或Firebase),则将获得一个API终端节点以与该文件匹配。 服务器将通过简单的设置存储,压缩,复制并执行其他您想做的事情。

由于我没有现有的API,因此我将使用Node在本地创建一个API,然后从前端访问该API。 那是总体规划!

创建一个后端

如果您已经有一个现有的服务器,该服务器带有一个端点来发送带有文件的后期请求,则可以跳到React部分(前端)。 后端API代码托管在GitHub上。 默认情况下,它在端口8000上运行。 要上传的端点是/upload

对于本教程,我将使用express-generator创建基本的Express服务器。

如果您没有express-generator,请使用npm install express-generator --global

然后使用express-generator file-upload-api创建一个Express应用。

我正在调用后端应用程序file-upload-api

它使用Express创建一个文件夹,但不会安装node_modules

cd file-upload-api

npm install

这将创建node_modules目录并安装package.json所有模块。

文件上传需要更多软件包: npm install cors express-fileupload

cors是从将在不同端口或其他服务器上运行的另一台服务器访问后端。

express-file-upload是一个方便的软件包,用于处理express中的已上传文件。 我们将其用作带有Express的中间件,以将文件从本地磁盘移动到服务器。

我将根据路线/upload上的发帖请求设置基本快递服务器。 我没有从express-generator包中更改任何不必要的内容,因为我们需要的只是一个基本服务器来处理我们的请求。

  app.post('/ upload',(req,res,next)=> { 
让uploadFile = req.files.file
const fileName = req.files.file.name
uploadFile.mv(
`$ {__ dirname} / public / files / $ {fileName}`,
函数(err){
如果(错误){
返回res.status(500).send(err)
}
  res.json({ 
文件:“ public / $ {req.files.file.name}”,
})
},

})

在通过POST请求命中/upload时,文件被复制到/public/files/fileName.ext 。 由于我将从前端发送附加到文件密钥的文件,因此可以在req.files.file上访问该文件。 文件名将在req.files.file.name可用。 如果需要更多详细信息,请记录该文件或参考文档。

在React上创建前端

现在我们有了可以处理文件的API端点,让我们在一个允许用户将文件上传到服务器的接口上进行工作。 该代码可在GitHub上找到。

和往常一样,我从create-react-app

如果您没有create-react-app ,则npm安装create-react-app:

create-react-app file-upload-react

我们需要文件上传字段,这是一种输入类型:

处理所选文件

上传需要一个计划。 有几种不同的处理方法。
这是我的:

  • 获取文件:位于输入的event.target.files[0]中。
  • 在输入上使用onClick设置文件选择的状态。
  • 将另一个状态设置为0 。 我们将使用它来显示上传进度。
  • 单击按钮,使用按钮中的onClick发送API请求。

文件更改时也可以发送文件,但这不是一个好主意。 由于按钮和所选文件处理的是完全相同的文件,因此最好使用状态来处理文件。

初始化状态

  this.state = {selectedFile:null,已加载:0,} 

将onClick处理程序添加到App中以选择文件并提交文件。

 返回( 



{Math.round(this.state.loaded,2)}%


  • handleSelectedFile:将状态设置为选定文件并重置上载%。
  • handleUpload:单击“ Upload按钮将文件发送到服务器。

handleSelectedFile只是将状态selectedFile设置为所选文件。

  handleselectedFile =事件=> { 
this.setState({
selectedFile:event.target.files [0],
已加载:0,
})
}

handleUpload将上传到API。 为此,我将使用轻量级的axios库。

npm install axios

import axios from 'axios'

我们发送一个POST请求,该请求包含3个组成部分:终结点,文件和用于进度的另一个对象参数。

  handleUpload =()=> { 
const data = new FormData()
data.append('file',this.state.selectedFile,this.state.selectedFile.name)
 轴距 
.post(端点,数据,{
onUploadProgress:ProgressEvent => {
this.setState({
已加载:(ProgressEvent.loaded / ProgressEvent.total * 100),
})
},
})
.then(res => {
console.log(res.statusText)
})
  } 

创建一个名为Data的新FormData。 这是默认的JavaScript对象。 在数据字段中附加文件和名称。

我已在文件顶部将endpoint定义为http://localhost:8000

data是要发送的附加文件。

第三个参数用于进度报告,它请求progressEvent。 您可以在此处参考axios示例以获取有关progressEvent的更多详细信息。

ProgressEvent已loadedtotal值。 我们使用它们来计算百分比并显示在按钮下方的div中。

在解决承诺后,将记录响应状态。

陷阱和改进

使用React和Node进行上传没有陷阱,但是这个演示确实做到了! 因为这只是一个演示,所以错误处理得不好。 无法取消上传; 如果您在上传时刷新前端,则服务器将崩溃。

服务器不检查脚本文件,也不对它们进行清理。

因此,这就是使用Node作为后端处理React上载的方法。 您还可以使用React对远程服务器和数据存储解决方案的API进行相同的操作。

特色React JS课程

升级您的JavaScript技能。
仅仅几个下午就可以学习React.js。

Wes Bos提供的优质分步培训课程,可以帮助您构建真实的React.js + Firebase应用程序和网站组件。 立即开始学习