如何做端到端测试AngularJS文件上传？ [英] How to do file upload in e2e AngularJS tests?

问题描述

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

In one of my views, I have a file upload control. It supports file uploading either via drag and drop, or via the standard file dialog opened after a button click.

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

How to do this in my e2e tests¹?

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

¹ Just one of the two options will be enough

推荐答案

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

You can upload files using Javascript blobs. This requires the FileApi, which isn't compatible with older browsers (http://caniuse.com/fileapi). But since you mentioned using drag and drop uploads, which uses the FileApi, it shouldn't matter too much.

有两种方式可以上传使用blob API文件。一个是很容易的，另一种是简单地在第一的延续。

There are two ways you can upload files using the blob API. One is very easy and the other is simply a continuation of the first.

，您可以创建一个新的BLOB：

Using Javascript, you can create a new blob with:

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

例如，这将创建一个包含文本的blob对象的Hello World！

For example, this will create a blob object that contains the text "Hello World!".

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

---

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

---

You could also use the following method is better for non-plaintext files, such as pdf's. You have to convert the file to Base64 (you can use something like this) and create the blob using the Base64 data.

使用此功能（略加修改版本<一个href=\"http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript\">this)以创建BLOB。

Use this function (a slightly modified version of this) to create the 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对象。

For example, this will create a PDF blob object.

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

---

在与上述的方法之一创建团块后，它可以被看作一个文件。例如，你可以把文件转换成FORMDATA对象（如果你正在做的像这）

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

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

*Filename parameter only seems to work on Chrome as of now.

这篇关于如何做端到端测试AngularJS文件上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！