将base64转换为blob然后放回输入文件[重复]答案

【问题标题】：convert base64 to blob then put back to input file [duplicate]将base64转换为blob然后放回输入文件[重复]
【发布时间】：2019-07-23 06:52:14
【问题描述】：

我正在使用以下代码将 base64 转换为 blob

function base64tofile(base64){

    var mime = base64.split(';base64,')[0].split('data:')[1];
    var base64 = base64.split(';base64,')[1];

    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

基本上，我浏览到一个输入文件，然后转换为 base64，然后我有一些图像处理（camanjs、crop 等）过程，然后作为输出将是 base64，然后转换为 blob 并使用 ajax 上传到服务器.

是否可以将 blob 放回输入文件？那么使用表单我可以在不使用 ajax 或 js 的情况下将数据提交到服务器，只需使用本机表单提交。

【问题讨论】：

为什么不直接提交表单？ File 是 Blob 的一种特定类型。见developer.mozilla.org/en-US/docs/Web/API/File
@lx1412 提交表单将只发送原始图像文件而不是修改后的文件。如上所述，在输入更改时，将图像文件转换为 base6，然后使用插件进行一些图像处理，然后输出将是 base64。
我知道了，但是你不能在前端修改你的本地图像文件。
It is possible 虽然仍然很老套。但你为什么要这样做？你不能简单地填充一个 FormData 并发送它吗？ developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…为什么一定要用HTML表单的方法？
@lx1412 我正在使用 camanjs，并且有很多图像处理库，例如fabricjs 比可以在前端修改图像仅供参考

标签： javascript

【解决方案1】：

更新： 事实上，经过一番研究，事实证明这是可以做到的！仅在现代浏览器中。你可以阅读它here。在 SO here 上已经有一个很好的回答问题。

基本上可以通过<input type=file>.files设置输入

这是不可能的。 html文件输入只能指向计算机上实际存在的文件。

来自MDN

您不能从脚本中设置文件选择器的值 - 执行以下操作无效：

const input = document.querySelector("input[type=file]");
input.value = "foo";

【讨论】：