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

数据URI是代表文件的base64编码的字符串(即, 你可以在网页中插入文件的内容, 而不是指定文件的URL)。当浏览器遇到URI时, 它将解码并构造原始文件。 DataURI最常在网络上用于图像。当网页需要另一个网页中的文件时, 该文件的URI可以由FormData对象方便地共享, 该对象可以将URI作为(键, 值)对, 并使用XMLHttpRequest发送它。

例子：

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

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

• 第1步：如果是画布对象, 则将DataURI作为输入。可以直接将URI作为输入, 也可以使用功能canvas.toDataURL(type [optional], 图像质量的值从0到1 [optional])获得。
• 第2步：DataURI转换为Blob(二进制大对象-以二进制格式存储任何类型的数据, 例如图像, 音频和视频)对象文件。
• 第三步：Blob对象文件附加在FormData对象实例{key：value}中。

例子：

假设存在一个用于gif类型图像的DataURI。

输入如下：

图片的URI。

程序：

<script type= "text/javascript" >
     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( 'lsbin\n' + pair[0] + '–' + pair[1])
     }
</script>

输出如下：

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

---