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-09-09
React ref的使用示例
这篇文章主要介绍了React ref的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
React Hydrate原理源码解析
这篇文章主要为大家介绍了React Hydrate原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
基于React封装组件的实现步骤
很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，本文主要介绍了基于React封装组件的实现步骤，感兴趣的可以了解一下
2021-11-11
为什么说form元素是React的未来
这篇文章主要介绍了为什么说form元素是React的未来，本文会带你聊聊React围绕form的布局与发展，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
详解在React-Native中持久化redux数据
这篇文章主要介绍了在React-Native中持久化redux数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
新建的React Native就遇到vscode报警解除方法
这篇文章主要为大家介绍了新建的React Native就遇到vscode报警解除方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React使用useImperativeHandle自定义暴露给父组件的示例详解
useImperativeHandle 是 React 提供的一个自定义 Hook,用于在函数组件中显式地暴露给父组件特定实例的方法,本文将介绍 useImperativeHandle的基本用法、常见应用场景,需要的可以参考下
2024-03-03
详解操作虚拟dom模拟react视图渲染
这篇文章主要介绍了详解操作虚拟dom模拟react视图渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
react为什么不推荐使用index作为key
本文主要介绍了react为什么不推荐使用index作为key，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07