Multer文件上传不起作用的多部分/表单数据图像

Question

我正在使用nuxt.js。我使用了一个包vue-picture-input，并且正在使用this教程来上传图像文件。使用我的api上的axios将其上传到服务器：

export default function (url, file, name = 'avatar') {
  if (typeof url !== 'string') {
    throw new TypeError(`Expected a string, got ${typeof url}`);
  }

  // You can add checks to ensure the url is valid, if you wish

  let formData = new FormData();
  formData.append(name, file);
  const config = {
    headers: {
      'content-type': 'multipart/form-data'
    }
  };

  return axios.post(url, formData, config);
};

我在发送前仔细检查过，formData确实有图像。然后，此请求转到后端并由以下代码接收：

const storage = multer.diskStorage({
    destination: 'some-destination',
    filename: function (req, file, callback) {
        crypto.pseudoRandomBytes(16, function(err, raw) {
            if (err) return callback(err);

            callback(null, raw.toString('hex') + path.extname(file.originalname));
        });
    }
});

var upload = multer({ storage : storage})

router.post('/upload/add', upload.single('avatar'), (req, res) => {
    if (!req.file) {
        console.log("No file received");
        return res.send({
          success: false
        });

    } else {
        console.log('file received');
        return res.send({
          success: true
        })
    }

    // Everything went fine 
})

我知道我正在以一种怪异的方式进行此操作-使用formData而不是实际提交html表单。每当我运行此代码时，响应始终为success: false。这是否意味着找不到formData图像？如果您可以帮助我进行调试，我将不胜感激。干杯。

Answer 1

[在研究类似问题时，我遇到了这篇文章。我有类似的工作方式。它可能有助于删除内容类型标头，它是由axios / formdata自动为我设置的。它应该包括这样一个由formdata生成的边界。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary5g0xJihuBbfw8DEp