React Native上传图片后，如何在Node.js(Multer)服务器端用sender字段重命名文件

我有一套React Native代码可以把图片上传到Node.js后端，后端用Multer处理上传。前端已经通过FormData附加了sender字段（值为Mr Smith），现在想在服务器端用这个sender字段替换当前文件名里的session.subscriber部分来重命名文件，但不知道怎么实现。

前端上传核心代码 #

export default class Images extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photo: null,
      user: 'Mr Smith'
    };
  }

  // ... 省略其他代码

  const data = new FormData();
  data.append('sender', this.state.user)
  data.append('picture', {uri: this.state.photo.uri, name: this.state.photo.name, type: this.state.photo.type })

  // 上传请求
  fetch(`https://myserver.com/_remote_images`, {
    method: 'POST',
    headers: {
      'Accept': "application/json",
    },
    body: data,
  })
    .then((response) => response.json())
    .then((response) => {
      if (response.answer) {
        alert('Upload success!');
      } else {
        alert('Upload failed...response.answer' + response.answer);
      }
    })
    .catch((error) => {
      console.log('Upload error in FETCH call to server: ', error);
      alert('Upload failed...(call to server)');
    });

  // ... 省略其他代码
}

当前服务器端Multer处理代码 #

// 文件上传配置
var multer = require('multer');
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    console.log("file.mimetype are: " + file.mimetype);
    console.log("file.fieldname are: " + file.fieldname);
    console.log("file.originalname are: " + file.originalname);

    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    // 当前用session.subscriber拼接文件名，想换成sender字段
    cb(null, file.fieldname + '-' + session.subscriber + '-' + file.originalname)
  }
});

// 初始化upload
const upload = multer({
  storage: storage,
  fileFilter(req, file, cb) {
    if (!file.originalname.match(/\.(png|jpg|jpeg)$/)) {
      // 只允许png和jpg格式
      return cb(new Error('Please upload a Image'))
    }
    cb(undefined, true)
  },
  limits: {
    fileSize: 5000000  // 5MB大小限制
  }
})

// 上传接口
app.post('/_remote_images', upload.single('picture'), uploadFiles);

function uploadFiles(req, res) {
  console.log(req.body);
  console.log("SENDER OF FILE: " + req.body.sender);
  console.log("REQUEST FILES: " + req.files);

  res.send({ answer: true })
}

解决方案 #

直接修改multer.diskStorage里的filename函数即可，因为Multer会在解析文件之前先解析FormData里的普通字段，所以在filename回调中可以直接通过req.body.sender获取到前端传递的sender值：

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    console.log("file.mimetype are: " + file.mimetype);
    console.log("file.fieldname are: " + file.fieldname);
    console.log("file.originalname are: " + file.originalname);

    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    // 用req.body.sender替换session.subscriber，加默认值避免空值异常
    const sender = req.body.sender || 'unknown-sender';
    cb(null, `${file.fieldname}-${sender}-${file.originalname}`)
  }
});

注意事项 #

1. 确保前端FormData中先appendsender字段，再append图片文件，这样Multer才能先解析到sender字段（你的前端代码已经符合这个顺序）。
2. 给sender设置默认值可以避免前端未传该字段时出现文件名异常。

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