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

写在前面

最近笔者在开发个人博客的后台管理系统，里面用到了图片上传相关的功能，在这里记录并分享一下，希望可以帮到大家，话不多说直接开始吧！（想看代码的可以直接跳到最后哦~）

效果

技术栈

前端：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.r