如何在 e2e AngularJS 测试中进行文件上传？答案

【问题标题】：How to do file upload in e2e AngularJS tests?如何在 e2e AngularJS 测试中进行文件上传？
【发布时间】：2012-10-30 14:16:17
【问题描述】：

在我的一个观点中，我有一个文件上传控件。它支持通过拖放或单击按钮后打开的标准文件对话框上传文件。

如何在我的 e2e 测试中做到这一点¹？

¹ 两个选项之一就足够了

【问题讨论】：

您究竟需要测试哪部分功能？它是正确的拖放行为还是只是文件上传？通过 AJAX 发送文件（例如，new File()）是否足够？
我只需要上传一个文件（带有一个真实文件），这样我就可以继续我的其他测试了。
所以通过 AJAX 发送一个真实文件是可行的，发送一个用 new File() 创建的空文件就不行了。
如果有帮助，该文件是一个 xml 文件，如果有办法，我可以在我的测试代码中创建该文件。
如何编写端到端测试？ Selenium 支持file uploads。

标签： javascript testing file-upload angularjs drag-and-drop

【解决方案1】：

您可以使用 Javascript blob 上传文件。这需要 FileApi，它与旧版浏览器 (http://caniuse.com/fileapi) 不兼容。但既然你提到使用拖放上传，它使用 FileApi，那应该没什么太大关系。

您可以通过两种方式使用 Blob API 上传文件。一个很简单，另一个只是第一个的延续。

使用 Javascript，您可以创建一个新的 blob：

var blob = new Blob("content", contentType);

例如，这将创建一个包含文本“Hello World!”的 blob 对象。

var foo = new Blob("Hello World!", {type: "text/plain"});

您也可以使用以下方法更好地处理非纯文本文件，例如 pdf。您必须将文件转换为 Base64（您可以使用 this 之类的东西）并使用 Base64 数据创建 blob。

使用此函数（this 的略微修改版本）创建 blob。

function b64toBlob(b64Data, contentType, sliceSize) {
b64Data = b64Data.replace(/\s/g, '');
contentType = contentType || '';
sliceSize = sliceSize || 1024;

function charCodeFromCharacter(c) {
    return c.charCodeAt(0);
}

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = Array.prototype.map.call(slice, charCodeFromCharacter);
    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
return blob;
}

例如，这将创建一个 PDF blob 对象。

var pdf = "JVBERi0xLjQKJcfsj6IKNSAwIG9...=="; //base64 encoded file as a String
var pdfBlob = b64toBlob(pdf, "application/pdf", 1024);

使用上述方法之一创建 blob 后，可以将其视为文件。例如，您可以将文件放入 FormData 对象中（如果您正在上传类似this）：

var fd = new FormData();
fd.append("uploadedFile", pdfBlob, "My PDF.pdf"*);

*Filename 参数目前似乎只在 Chrome 上有效。

【讨论】：