React+GraphQL异步函数结合Mutation实现图片上传：文件名获取异常

我看了你的代码，问题主要出在异步操作的处理不当上，导致你在同步赋值的时候，文件上传的异步逻辑还没完成，所以拿到的是undefined。下面一步步帮你解决：

问题根源拆解 #

1. ProfileImage函数没有返回异步结果：你在函数里用了.then()处理Promise，但整个函数没有返回这个Promise，所以调用它的时候拿不到异步操作后的文件名。
2. Resolver中没有等待异步操作完成：signUp里调用ProfileImage时直接赋值，没有用await，导致代码继续往下走，此时文件名还没生成，自然是undefined。
3. 条件判断逻辑错误：你用args.profilephoto != ""来判断是否有文件上传，但GraphQL上传的文件对象不是字符串，空字符串的判断完全不生效，应该检查是否存在该对象。

修正后的代码实现 #

第一步：重构文件上传函数 #

把ProfileImage改成async函数，用await处理异步流，同时用更可靠的stream.pipeline替代pipe（能更好处理流错误和资源清理）：

const fs = require("fs");
const { promisify } = require("util");
const pipeline = promisify(require("stream").pipeline);

async function ProfileImage(file) {
  try {
    // 等待文件对象的Promise解析（GraphQL上传的File通常是一个Promise）
    const { createReadStream, filename } = await file;
    // 确保上传目录存在，避免报错
    const uploadDir = "./uploadedFiles";
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    // 可选：添加时间戳避免文件名重复覆盖
    const uniqueFilename = `${Date.now()}-${filename}`;
    const filePath = `${uploadDir}/${uniqueFilename}`;
    
    // 用pipeline处理文件流
    await pipeline(createReadStream(), fs.createWriteStream(filePath));
    
    console.log("上传完成，文件名=", uniqueFilename);
    return uniqueFilename;
  } catch (err) {
    console.error("文件上传失败:", err);
    throw err; // 抛出错误让上层Resolver处理
  }
}

第二步：修正Resolver中的异步调用 #

在signUp里调用ProfileImage时加上await，同时修正条件判断：

export default {
  Mutation: {
    signUp: async (parent, args, { models, secret }) => {
      try {
        let profimgnm = "";
        let docimgnm = "";

        // 判断是否有头像文件上传
        if (args.profilephoto) {
          profimgnm = await ProfileImage(args.profilephoto);
          console.log("profimgnm=", profimgnm);
        }
        // 判断是否有文档文件上传
        if (args.documents) {
          docimgnm = await ProfileImage(args.documents);
          console.log("docimgnm=", docimgnm);
        }

        // 创建用户并保存到数据库
        const user = await models.User.create({
          name: args.name,
          email: args.email,
          phone: args.phone,
          address: args.address,
          zipcode: args.zipcode,
          profilephoto: profimgnm,
          documents: docimgnm,
        });

        return user;
      } catch (err) {
        console.error("注册失败:", err);
        throw err; // 抛出错误让GraphQL返回给客户端
      }
    }
  }
};

额外注意事项 #

• 文件名重复问题：我加了Date.now()生成唯一文件名，避免多次上传同名文件时被覆盖，如果你有其他需求可以调整这个逻辑。
• 错误处理：现在的代码会抛出错误，GraphQL会把错误返回给客户端，方便调试，你也可以根据业务需求自定义错误信息。
• 目录权限：确保Node.js进程有./uploadedFiles目录的读写权限，否则会出现权限错误。

这样修改后，你应该就能正确获取到上传的文件名并存入数据库了。

内容的提问来源于stack exchange，提问作者user11481068