使用Cypress和cypress-file-upload时出现“多部分数据意外结束”

Question

我正在使用推荐的插件cypress-file-upload从我的fixtures文件夹中附加和上传图像文件。这个文件上传在用户完成时工作得很好，但当Cypress尝试此过程时，服务器将返回以下错误(即使它模仿用户将采取的相同操作)：

Error: Unexpected end of multipart data
api_1       |     at /app/node_modules/dicer/lib/Dicer.js:62:28
api_1       |     at processTicksAndRejections (internal/process/task_queues.js:75:11) {
api_1       |   storageErrors: []
api_1       | }

奇怪的是，我仔细检查了来自Cypress的请求，并将其与浏览器发送的请求进行了比较，我没有看到任何显著的差异。下面是上传文件的Cypress代码片段：

// attach file through cypress-file-upload
cy.getBySel('avatar-modal-input').attachFile('images/quinoa.png') // <- this method is from cypress-file-upload
cy.getBySel('avatar-modal-button').click() // submits the request to the server
cy.wait('@updateUser')

在后端，它到达这个端点：

// Endpoint to upload image
router.post('/upload', upload.single('image'), ensureAuthorized, (req, res) => res.status(200).json({ file: req.file.location }));

和upload函数实用程序：

const aws = require('aws-sdk');
const multer = require('multer');
const multerS3 = require('multer-s3');

aws.config.update({
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  region: process.env.AWS_REGION,
});

const s3 = new aws.S3();

const fileFilter = (req, file, cb) => {
  if (req.body.gif === 'true' && (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype === 'image/gif')) {
    cb(null, true);
  } else if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(new Error('Invalid file type, only JPEG and PNG are allowed!'), false);
  }
};

const upload = multer({
  fileFilter,
  storage: multerS3({
    acl: 'public-read',
    s3,
    bucket: process.env.AWS_BUCKET,
    key(req, file, cb) {
      cb(null, Date.now().toString());
    },
  }),
});

module.exports = upload;

Answer 1

我也面临着类似的问题。我想知道这是否可以解决问题：

6.2.1 6个月前

“使用cy.intercept()时，多部分/表单数据的编码不再错误。这应该可以防止请求所指向的后端服务出现意外的多部分数据结尾错误。修复程序#9359。”

https://openbase.com/js/cypress/versions