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图像？如果您可以帮助我进行调试，我将不胜感激。干杯。

覆盖文件不起作用的多部分/表单数据图像

0 个答案: