将上传的文件发送到赛普拉斯的后端

Question

我使用赛普拉斯使用我的应用程序，并通过向后端发送上传文件遇到问题。它发送一个空的FormData。

我使用https://github.com/cypress-io/cypress/issues/170中的代码来处理文件上传，它是：

 return cy.get('input[type=file]').then(subject => {
    return cy
        .fixture('blueprint.xlsx', 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
            const el = <HTMLInputElement>subject[0]
            if (el != null) {
                const testFile = new File([blob], 'blueprint.xlsx')
                const dataTransfer = new DataTransfer()
                dataTransfer.items.add(testFile)
                el.files = dataTransfer.files
            }
            return subject
        })
}) 

当我调试API调用时，文件被设置，它在fixtures文件夹中，一切似乎都很好，但调用没有任何formdata（应该是文件），并以400 Bad请求错误结束。

为什么formdata是空的？这是赛普拉斯的问题吗？有没有办法将我的夹具文件发送到后端？

Answer 1

您的代码似乎在ng-file-upload demo page上正常运行。

我还测试了一个'xlsx'文件，没有发现问题。

describe('Angular file upload Demo', () => {

  /*
    To run these tests, add a file 'logo.png' to /cypress/fixtures
  */

  it('uploads the fixture file', () => {
    cy.visit('https://angular-file-upload.appspot.com/')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').then(subject => {
      return cy.fixture('logo.png', 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
          console.log('blob', blob)
          const el = subject[0]
          if (el != null) {
            const testFile = new File([blob], 'logo.png')
            const dataTransfer = new DataTransfer()
            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
          }
          return subject          
        })
    })

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

  Cypress.Commands.add('uploadFile', { prevSubject: 'element' }, (subject, fileName) => {
    console.log('subject', subject)
    return cy.fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        console.log('blob', blob)
        const el = subject[0]
        if (el != null) {
          const testFile = new File([blob], fileName)
          const dataTransfer = new DataTransfer()
          dataTransfer.items.add(testFile)
          el.files = dataTransfer.files
        }
        return subject          
      })
    }
  )

  it('uploads the file via custom command', () => {
    cy.visit('https://angular-file-upload.appspot.com/')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').uploadFile('logo.png')

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

})

Answer 2

经过几个小时的尝试，我想出了一个解决方法，使ng-file-upload工作。

至少我的问题是关于没有作为Blob实例传递的文件，我猜。

我在柏树一侧使用了和乔纳斯一样的片段。

解决方法是在上传函数中添加一个检查，以管理select和drop指令中的更改。

function upload() {
    if (!Upload.isFile(file)) {
      file = new File([file], file.name, { type: file.type })
    }

    Upload.upload({
        url: "/api/upload",
        data: {
          file: file
        }
    })
    .then(/* ... */)
    /* ... */
}

这只是一种解决方法，我真的不喜欢它。

我不知道为什么会发生这种情况，只有当我使用cypress进行测试时才会发生这种情况，所以我不想在我的生产代码中添加它。

有人可以帮我理解为什么会这样吗？

有谁知道为什么传递给上传函数的文件实例似乎是一个File实例但是它不是？

Answer 3

我用“cypress”：“3.3.1”

以下代码对我有用，

const fixturePath = 'test.png';
const mimeType = 'application/png';
const filename = 'test.png';

cy.getTestElement('testUploadFrontID')
  .get('input[type=file')
  .eq(0)
  .then(subject => {
    cy.fixture(fixturePath, 'base64').then(front => {
      Cypress.Blob.base64StringToBlob(front, mimeType).then(function(blob) {
        var testfile = new File([blob], filename, { type: mimeType });
        var dataTransfer = new DataTransfer();
        var fileInput = subject[0];

        dataTransfer.items.add(testfile);
        fileInput.files = dataTransfer.files;

        cy.wrap(subject).trigger('change', { force: true });
      });
    });
  });

getTestElement是我自己添加的命令，

Cypress.Commands.add(`getTestElement`, selector =>
cy.get(`[data-testid="${selector}"]`)
);