req.file 未填充，但 req.body 正在使用 multer

Question

我正在尝试使用 multer 将图像上传到 NodeJS 服务器，并按照以下示例为 React Native 应用程序表达： https://github.com/expo/image-upload-example/blob/master/backend/index.js

但它似乎不起作用，我真的不知道为什么...... 我正在使用 axios 处理 http 请求。

客户端：

    const uriParts = image.split('.'); //image is the uri
    const fileType = uriParts[uriParts.length - 1];

    const formData = new FormData();
    formData.append('photo', {
      image,
      name: `photo.${fileType}`,
      type: `image/${fileType}`,
    });


    axios.post(`${Utils.userServerUrl}/edit_profile`, { formData })
      .then((response) => {
        setLoading(false);
        console.log(`response : ${response}`);
      })
      .catch((err) => console.log(err));

服务器端：

const multer = require('multer');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    console.log(req.body.name) 
    cb(null, 'profile_imgs/')
  },                    
  filename: function (req, file, cb) {
    cb(null, file.fieldname)
  }                     
});                     

const upload = multer({ storage: storage });

router.post('/', upload.single('photo'), (req, res) => {
  const {formData} = req.body;
  console.log(formData);
  if(!req.file) console.log('no files uploaded');
  else console.log('file uploaded!');
})

我已经尝试添加这些选项：

let options = {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
  };

到 axios 方法，但我得到一个 错误：未找到多部分边界

如果有人可以帮助我，我会很高兴...谢谢

[编辑] 解决方案：

苦苦挣扎了一阵子终于找到了解决办法，如果有人感兴趣的话。

客户端：

function uploadImageAsync(uri) {

    const serverUrl = `${Utils.userServerUrl}/edit_profile`;

    const uriParts = uri.split('.');
    const fType = uriParts[uriParts.length - 1];
    setFileType(fType);


    const formData = new FormData();
    formData.append('photo', {
      uri,
      name: `${profile.username}.${fType}`,
      type: `image/${fType}`,
    });

    axios.post(serverUrl, formData) //I didn't encapsulate formData in an object
      .then(({ data }) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(JSON.stringify(err));
      });

  }

服务器端：

const multer = require('multer');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'images/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage: storage });

router.post('/', upload.single('photo'), (req, res) => {
  if(!req.file) {
    res.send('No file uploaded !')
  }else{
    res.send('File uploaded successfully !')
  }
});

Answer 1

在客户端，将 FormData 作为请求体发送：

const formData = new FormData()

// photo is a Blob, filename is a string
formData.append('photo', photo, filename)

const response = await axios.post(url, formData)

在服务器上，从req.file读取数据：

router.post('/', upload.single('photo'), (req, res) => {
  // use req.file.buffer in multer v1, req.file.stream in multer v2
})