如何将数据 URI 转换为文件然后附加到 FormData？

数据 URI 是表示文件的 base64 编码字符串（即，您可以在网页中插入文件内容，而不是指定文件的 URL）。当浏览器遇到 URI 时，它会解码并构造原始文件。 DataURIs 在网络上最常用于图像。当一个网页想要从另一个网页获取一个文件时，该文件的 URI 可以方便地被 FormData 对象共享，该对象可以将 URI 作为 (key, value) 对并使用 XMLHttpRequest 发送。

例子：

Input: 1. DataURI for a file.
       2. fileName. // To store the file
Output: fileName - [ObjectFile]

程序：此过程可分 3 步完成。

• 第一步：以DataURI作为输入。URI可以直接作为输入，也可以使用canvas.toDataURL(type[optional],value for image quality 0 to 1[optional])函数获取canvas目的。
• 第二步：将DataURI转换成Blob（Binary Large Object——以二进制格式存储任何类型的数据，如图像、音频和视频）对象文件。
• 第 3 步：将 Blob 对象文件附加到 FormData 对象实例 {key : value} 中。

示例：假设“gif”类型的图像有一个 DataURI。
输入：图像的 URI。
程序：

    var inputURL ="";
  
    var blobObject = blobCreationFromURL(inputURL);
  
    // Create Blob file from URL
    function blobCreationFromURL(inputURI) {
  
        var binaryVal;
  
        // mime extension extraction
        var inputMIME = inputURI.split(',')[0].split(':')[1].split(';')[0];
  
        // Extract remaining part of URL and convert it to binary value
        if (inputURI.split(',')[0].indexOf('base64') >= 0)
            binaryVal = atob(inputURI.split(',')[1]);
  
        // Decoding of base64 encoded string
        else
            binaryVal = unescape(inputURI.split(',')[1]);
  
        // Computation of new string in which hexadecimal
        // escape sequences are replaced by the character 
        // it represents
  
        // Store the bytes of the string to a typed array
        var blobArray = [];
        for (var index = 0; index < binaryVal.length; index++) {
            blobArray.push(binaryVal.charCodeAt(index));
        }
  
        return new Blob([blobArray], {
            type: inputMIME
        });
    }
  
    var fdataobj = new FormData();
  
    // Create formdata object and append the object
    // file to the name 'Blob file'
    fdataobj.append("Blob File", blobObject);
  
    // FormData object content is displayed in alert box.
    for (var pair of fdataobj.entries()) {
        alert('GeeksforGeeks\n' + pair[0] + '–' + pair[1])
    }

输出： FormData 对象的输出将在警告框中显示为名称和“对象文件”值对。可以使用 JavaScript 的 FileReader 对象读取对象文件，该对象将读取对象文件并可以使用任何 JavaScript 显示技术进行显示。