React + Node.js实现图片上传功能

更新时间：2024年01月12日 09:32:57 作者：JacksonChen_

最近笔者在开发个人博客的后台管理系统,里面用到了图片上传相关的功能,在这里记录并分享一下,希望可以帮到大家,话不多说直接开始吧,感兴趣的朋友可以参考下

效果

技术栈

前端：react+antdesign（upload组件）

后端：node+express+multer+uuid

前端

上传前

这边前端直接使用的 antdesign 所提供的上传组件，代码如下

       <Upload
              accept="multipart/form-data"
              name="avater"
              listType="picture-card"
              fileList={[]} // 手动设置空的 fileList
              className="avatar-uploader"
              showUploadList={false}
              beforeUpload={(file) => {
                handlePreview(file)
                return false // 阻止默认上传行为
              }}
            >
              {imageUrl ? <img src={imageUrl} alt="avater" style={{ width: '100%' }} /> : uploadButton}
            </Upload>

accept="multipart/form-data：是用于指定在 HTML 表单中上传文件时使用的编码类型。它告诉服务器将表单数据编码为 multipart/form-data 格式，这是用于上传文件的一种常见方式。

beforeUpload：则是需要在上传前对文件进行处理，我们来看一下代码里面发生了什么。

  const handlePreview = async (file: File) => {
    setImageUrl('')
    setLoading(true)
    const isImage = file.type.startsWith('image/')
    const isImageExtension = /\.(jpg|jpeg|png|gif)$/i.test(file.name)
 
    if (!isImage || !isImageExtension) {
      message.error(`${file.name} is not a supported image file`)
      return Upload.LIST_IGNORE
    }
 
    try {
      const reader = new FileReader()
      reader.onload = () => {
        setImageUrl(reader.result as string)
        setLoading(false)
      }
      reader.readAsDataURL(file)
    } catch (error) {
      console.error('图片预览失败', error)
      message.error('图片预览失败')
      setLoading(false)
    }
  }

首先判断文件的格式是不是图片类型的，如果不是，则终止上传。

    const isImage = file.type.startsWith('image/')
    const isImageExtension = /\.(jpg|jpeg|png|gif)$/i.test(file.name)
 
    if (!isImage || !isImageExtension) {
      message.error(`${file.name} is not a supported image file`)
      return Upload.LIST_IGNORE
    }

如果是图片类型则创建一个新的FileReader对象。

reader.readAsDataURL(file) 开始读取指定的文件，这里的 file 是一个文件对象，通过某种方式传递给这段代码。readAsDataURL方法会将文件内容读取为Data URL。

reader.onload：设置一个事件处理程序，当文件读取完成时会触发该事件。

在读取完成时，触发 onload 事件。在这个函数中，通过 reader.result 获取读取到的Data URL，然后使用 setImageUrl 函数将其反显到页面当中。

    const reader = new FileReader()
      reader.onload = () => {
        setImageUrl(reader.result as string)
        setLoading(false)
      }
      reader.readAsDataURL(file)

这段上传前的代码是为了判断是否为图片类型，以及读取出来图片反显到页面当中，大家根据自己的需求调整。

反显效果如下：

上传

上传前准备工作以就绪，接下来就是点击上传，注意我这里因为有其他信息，需要一起上传。

如果只是单独的上传图片一个功能，antdesign 提供的有现成的代码，只需要在action属性写上后端地址即可。

点击上传

我们使用 antdesign 的表单提交功能，点击上传后得到一个values对象如下：

我们的图片信息在pic字段下，这个字段是自己设置的，下面是点击上传文件相关代码。

  const handleAddRequest = async (values: any) => {
    const formData = new FormData()
    if (values.pic && values.pic.fileList.length) {
      const file = values.pic.fileList[0].originFileObj
      formData.append('file', file, values.pic.fileList[0].name)
    }
 
    fetch(baseUrl + '/add-article', {
      method: 'POST',
      body: formData,
    })
      .then((res) => res.json())
      .then((res) => {
      })
      .catch((error) => {
      })
  }

首先创建一个新的 FormData 对象，用于构建表单数据。

const formData = new FormData()

检查是否存在图片信息（values.pic），并且图片文件列表（values.pic.fileList）不为空。

values.pic.fileList[0].originFileObj 则是获取这个文件对象的原始文件对象。

将文件添加到 FormData。

   const file = values.pic.fileList[0].originFileObj
   formData.append('file', file, values.pic.fileList[0].name)

注意 'file' 需要和后端读取文件的命名一致，等会后端会介绍。

最后只需要将整理好的formData对象放到body中发给后端即可！

后端

首先安装相关模块

npm i express //用于接口请求
npm i multer  //文件模块
npm i uuid    //文件命名

指定静态页面(图片存储文件夹)

app.use('/uploads/', express.static('./uploads')) //指定静态页面

解析Body数据

const bodyParser = require('body-parser')
app.use(bodyParser.json())

配置 multer 磁盘存储

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')//图片要存储的文件夹地址
  },
  filename: function (req, file, cb) {
    cb(null, uuid.v1() + '.' + file.originalname.split('.').pop())//存储的文件名
  },
})

使用配置好的存储创建multer实例

const upload = multer({ storage: storage })

定义一个用于添加文章的路由，支持文件上传

使用 upload.single('file') 作为中间件来处理带有字段名 'file' 的单个文件上传，这与上面前端上传的命名相对应（ formData.append('file', file, values.pic.fileList[0].name)）

app.post('/add-article', upload.single('file'), async (req, res) => {
  const filePath = 'uploads/' + req.file.filename // 获取上传文件存储的文件路径
  //todo....
})

最后上传的图片会存到uploads文件夹中

完整代码

由于整个项目不单单是这一个功能，这里就把上传图片功能所用到的前后端代码进行分享，有需要的同学可以参考一下代码！

前端

HTML      
 <Upload
              accept="multipart/form-data"
              name="avater"
              listType="picture-card"
              fileList={[]} // 手动设置空的 fileList
              className="avatar-uploader"
              showUploadList={false}
              beforeUpload={(file) => {
                handlePreview(file)
                return false // 阻止默认上传行为
              }}
            >
              {imageUrl ? <img src={imageUrl} alt="avater" style={{ width: '100%' }} /> : uploadButton}
            </Upload>
 
JS
##上传前操作
  const handlePreview = async (file: File) => {
    setImageUrl('')
    setLoading(true)
    const isImage = file.type.startsWith('image/')
    const isImageExtension = /\.(jpg|jpeg|png|gif)$/i.test(file.name)
 
    if (!isImage || !isImageExtension) {
      message.error(`${file.name} is not a supported image file`)
      return Upload.LIST_IGNORE
    }
 
    try {
      const reader = new FileReader()
      reader.onload = () => {
        setImageUrl(reader.result as string)
        setLoading(false)
      }
      reader.readAsDataURL(file)
    } catch (error) {
      console.error('图片预览失败', error)
      message.error('图片预览失败')
      setLoading(false)
    }
  }
 
##上传处理字段
  const handleAddRequest = async (values: any) => {
    const formData = new FormData()
    if (values.pic && values.pic.fileList.length) {
      const file = values.pic.fileList[0].originFileObj
      formData.append('file', file, values.pic.fileList[0].name)
    }
 
    fetch(baseUrl + '/add-article', {
      method: 'POST',
      body: formData,
    })
      .then((res) => res.json())
      .then((res) => {
      })
      .catch((error) => {
      })
  }

后端

const express = require('express')
const multer = require('multer') //文件上传模块
const uuid = require('uuid') //生成随机uuid-图片命名需要
app.use('/uploads/', express.static('./uploads')) //指定静态页面
//解析Body数据
const bodyParser = require('body-parser')
app.use(bodyParser.json())
 
 
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, uuid.v1() + '.' + file.originalname.split('.').pop())
  },
})
 
const upload = multer({ storage: storage })
 
// 新增文章
app.post('/add-article', upload.single('file'), async (req, res) => {
  const filePath = 'uploads/' + req.file.filename//存储的文件名
  todo.....
})

以上就是React + Node.js实现图片上传功能的详细内容，更多关于React+Node.js图片上传的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React的三大属性你都知道吗
这篇文章主要为大家详细介绍了React的三大属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
JavaScript中React 面向组件编程（下）
在React面向组件编程中，除了上一章节的组件实例的三大核心属性以外，还有很多重要的内容比如：React 的生命周期，受控组件与非受控组件，高阶函数和函数柯里化的理解等，在本文中会给大家继续讲解React 面向组件编程中剩余的内容
2023-03-03
利用React-router+Webpack快速构建react程序
目前 React、Webpack 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识怎么学习一下，开启一段新的前端开发之路呢？那么这篇将给大家运用示例代码详细的介绍使用React-router和Webpack如何快速构建一个react程序，感兴趣的朋友们下面来一起看看吧。
2016-10-10
React通过classnames库添加类的方法
这篇文章主要介绍了React通过classnames库添加类,在vue中添加class是一件非常简单的事情，你可以通过传入一个对象, 通过布尔值决定是否添加类，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
React-router4路由监听的实现
这篇文章主要介绍了React-router4路由监听的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
React精髓！一篇全概括小结(急速)
这篇文章主要介绍了React精髓！一篇全概括小结(急速)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
重新理解 React useRef原理
这篇文章主要为大家介绍了React useRef原理的深入理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
详解react内联样式使用webpack将px转rem
这篇文章主要介绍了详解react内联样式使用webpack将px转rem，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
一百多行代码实现react拖拽hooks
这篇文章主要介绍了一百多行代码实现react拖拽hooks，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
React报错Too many re-renders解决
这篇文章主要为大家介绍了React报错Too many re-renders解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12