如何做到在E2E AngularJS测试文件上传？(How to do file upload in

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

如何做到这一点在我的E2E测试^1？

---

¹只是两个选项中的一个就足够了

Answer 1:

您可以上传使用Javascript斑点文件。 这需要FileApi，这是不符合旧的浏览器兼容（ http://caniuse.com/fileapi ）。 但既然你提到使用拖放上传，它使用FileApi，这一问题并不应该太多。

有两种方式可以上传使用blob API文件。 一个是很容易的，另一种是干脆先的延续。

使用JavaScript，您可以创建一个新斑块有：

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

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

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

---

你也可以用下面的方法对非纯文本文件，如PDF的更好。 你必须将文件转换为Base64（你可以使用像这样 ），并创建一个使用Base64编码数据的斑点。

使用此功能（稍加修改的版本， 这个 ）创建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对象（如果你做喜欢上传此 ）：

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

*文件名参数似乎只在Chrome浏览器到现在为止。

文章来源: How to do file upload in e2e AngularJS tests?