如何使用 javascript 将捕获的媒体文件转换为 base64？答案

【问题标题】：How to convert a captured media file into base64 using javascript?如何使用 javascript 将捕获的媒体文件转换为 base64？
【发布时间】：2014-08-07 01:31:38
【问题描述】：

我正在使用电话间隙开发应用程序。我捕获图像/音频/视频并将其路径存储在本地存储中。我需要获取捕获文件的base64并将其存储在数据库中，然后与服务器同步。这可能使用 javascript 吗？

我尝试使用电话间隙提供的 FileReader API，但函数 reader.onloadend() 没有被执行。

可以设法使用画布获取 base64 的图像，但是否可以使用画布获取音频和视频的 base64？

谢谢。

【问题讨论】：

你需要使用multipart WS，因为你的音频/视频base64非常大
你能解释一下吗？对于应用程序，最初它将所有数据存储在本地存储中，一旦用户同步数据，它将被上传到服务器上。所以，我需要将捕获的文件的base64存储在本地。

标签： javascript jquery html cordova html5-canvas

【解决方案1】：

是的，可以获取媒体文件的 base64 reader.onloadend() 没有被调用，因为您可能错过了这一行 reader.readAsDataURL(file)。

         // here i have a file input and i am using the FileReader Api to read the content on it's change event ( i have no idea what is the event for capturing a media in phonegap
 $("#file").change(function(e){ 
           var file = e.currentTarget.files[0];  

            var FR = new FileReader();

            FR.onload = function (encodedFile) {
                //alert("onload is called.");
            }

            FR.onloadend = function (encodedFile) {
                var src = encodedFile.target.result;
                src = src.split("base64,");

                // This is the base64 encoded string of that media file which you will be interested to store in the database(post to the server
                var contentAsBase64EncodedString = src[1];  
            } 
           reader.readAsDataURL(file);

  }

【讨论】：

我以同样的方式实现了它。但是 reader.onloadend() 不执行。下面是我的代码函数 gotFile(file){ readDataUrl(file); } 函数 readDataUrl(file) { var reader = new FileReader(); reader.onloadend = function(evt) { console.log(evt.target.result); };数据=reader.readAsDataURL(文件); WL.Logger.debug(数据); }
@gajjarkruti 可能会崩溃，所以添加 reader.onerror = function () {alert("error");} 进行检查。