React AntDesign form表单文件上传 nodejs formidable 接受参数并把文件放置后端项目相对目录指定文件夹下面

@umijs/max 请求方法

// 上传文件改成form表单
export async function uploadFile(data, options) {
  return request(CMMS_UI_HOST + '/api/v1/uploadFile', {
    method: 'POST',
    data,
    requestType: 'form',
    ...(options || {}),
  });
}

前端调用方法 注意upload组件上传 onChange的如下方法，参数 info.file.originFileObj 才是真正的file对象，不要直接使用info.file

 const handleChange = async (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      let formData = new FormData();
      formData.append('file', info.file.originFileObj);
      const res = await services.system.uploadFile(formData);
      if (res.success) {
        setImageUrl(res.data)；
      }
      setLoading(false);
    }
  };

后端方法 使用了formidable 模块

const express = require(‘express’);
const app = express();
const path = require(‘path’);
const { v4: uuidv4 } = require(‘uuid’);
const formidable = require(‘formidable’);
const uuid = uuidv4();
const fs = require(‘fs’);

app.post('/api/v1/uploadFile', async (req, res) => {
      try {
        const form = new formidable.IncomingForm({
          keepExtensions: true,//保留文件后缀名
          uploadDir: path.join(__dirname, '../uploads/'), //指定存放目录
        });
        form.parse(req, (err, _, files) => {
          if (err) throw err;
          let filename = files.file[0].originalFilename;
          //获取文件后缀名
          let suffix = filename.substring(filename.lastIndexOf('.'));
          //新文件名
          let newFilename = uuid + suffix;
          //替换源文件名
          fs.renameSync(
            files.file[0].filepath,
            path.join(__dirname, '../uploads/', newFilename),
          );
          res.send({
            success: true,
            data:
              `${req.protocol}://${req.hostname}:${process.env.SERVER_PORT}/` +
              newFilename,
            errorCode: 0,
          });
        });
      } catch (error) {
        res.send({
          success: false,
          errorCode: 1,
        });
      }
    });

实际效果

前端请求

后端上传后文件夹图片

以上文件夹下的图片资源默认浏览器客户端是不能访问的
需要nodejs 后端开启相关资源访问权限。需要用到如下代码
注意这个 express.static 中的path路径是相对路径

const app = express();
app.use(express.static(path.join(__dirname, './uploads')));

最后看一下实际访问效果