从 blob 创建文件答案

【问题标题】：Creating a file from a blob从 blob 创建文件
【发布时间】：2017-05-23 08:51:11
【问题描述】：

我需要一些 javascript 大师。我有这个代码：

handleImage(new File([blob], blob.name, {type: blob.type})).done(/* something */)

和

handleImage = function (image) {
        // create some fake form data
        var formData = new FormData();
        formData.append("attachment", image);
        formData.append("auto", true);
        formData.append("_csrf", "xxxxxxxxx");

        // post to the server.
        return $.ajax({
            url: "/some/url",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            error: function () {
                console.log("error");
            }
        });

这适用于 Chrome 和 Firefox，但在使用 Safari (10.1.1) 时，服务器 (java / spring mvc) 在 MultipartHttpServletRequest 中接收到一个用于“附件”的空文件。所以在我看来new File([blob], blob.name, {type: blob.type}) 在某种程度上失败了。

知道这里出了什么问题吗？

【问题讨论】：

可能是 safari 的实现，但你为什么还要将它转换为 File 对象？您将获得的唯一区别是您将在对象上拥有一个lastModified 属性...当您将 Blob 附加到 FormData 时，第三个参数设置附件的名称。所以formData.append("attachment", image, image.name); 和handleImage(blob) 将执行与您正在执行的请求完全相同的请求，除了它将在 Safari 和其他不支持 File 构造函数的所有其他浏览器上运行（看着你的 IE）
@Kaiido 我对handleImage 进行了另一个调用，使用文件参数
不过，File 还是 Blob 的一个子集。唯一的区别是 File 将添加一个 name 和一个 lastModified 属性。看来您已经用自己的name 属性扩展了您的blob，所以现在唯一的区别是这个lastModified 属性，您也可以自己添加它。我没有看到需要文件而不是 Blob 的一个 API。文件的唯一优点是您不需要设置FormData.append 的第三个参数。因此，您可以对文件执行与对 Blob 执行的操作完全相同的操作。（file instanceof Blob; 是真的）
@Kaiido 谢谢，直接使用 blob 确实解决了这个问题。您可以发表您的评论作为答案吗？
是的，只要我能坐到火车上，或者几个小时后，我就会去

标签： javascript safari form-data fileapi

【解决方案1】：

这可能是 safari 的年轻实现中的一个错误。

但是你为什么还要把它转换成 File 对象呢？

File 对象是一个 Blob，唯一的区别是它具有 name 和 lastModified 属性。但是，由于您似乎已经扩展了您的 blob，所以它只留下了这个 lastModifiedproperty，您也可以添加它。

我能想到的唯一 API，如果您的对象是 Blob 或文件，它会有所不同是 FormData.append 方法；如果您传递一个 File 对象，它将能够自动设置文件名。但是这个方法有第三个参数，允许你设置这个文件名。

因此，如果您将代码更改为包含 formData.append("attachment", image, image.name); 并直接使用 handleImage(blob) 调用它，它将执行与您正在执行的请求完全相同的请求，除了它将在 Safari 和所有其他浏览器上运行不支持 File 构造函数（看你的 IE）。

【讨论】：