通过cordova-plugin-file选择本地文件并通过xhr上传答案

【问题标题】：Select local file via cordova-plugin-file and upload it via xhr通过cordova-plugin-file选择本地文件并通过xhr上传
【发布时间】：2023-03-21 00:25:01
【问题描述】：

在我的 cordova 应用程序中，用户可以录制音频文件（通过媒体插件），然后将其存储在本地文件 (cordova.file.dataDirectory) - 这就像一个魅力。

我现在想选择这个文件并通过 xhr 上传它，但文件元素在服务器端是空的。这就是我的代码的样子：

window.resolveLocalFileSystemURL(
    cordova.file.dataDirectory + "" + voiceMediaFilename,  
    function(fileEntry) {
      console.log("resolveLocalFileSystemURL done for " + voiceMediaFilename);
      fileEntry.file(
        function(file){
          console.log("getFile done for " + voiceMediaFilename);
          console.log("file done, starting fd ...");
          var fd = new FormData();
          fd.append("sender", uuid);
          fd.append("receiver", receiver);
          fd.append("timestamp", timestamp);
          fd.append("random", random);
          fd.append("media", file);
          console.log(file);
          console.log("Filesize of audio: " + file.size);
          uploadMedia(fd, user, timestamp, messageTypeOwn, uuid, receiver, msgId);
          voiceMediaFilename = "";
        }, 
        function(err){
          alert("Error getting file");
        }
      );
          },
    function(err){
      alert("Error in resolveLocalFileSystemURL " + JSON.stringify(err));
    }
  );

uploadMedia() 函数本身执行 xhr 请求 - 该函数有效，因为我也在其他情况下使用它（例如，用户通过输入类型文件选择文件）。我假设为了真正选择文件对象而遗漏了一些东西，但我真的不知道是什么。

谢谢

【问题讨论】：

标签： file cordova upload xmlhttprequest cordova-plugin-file

【解决方案1】：

终于弄明白了——也许它可以帮助别人。

需要将文件作为 ArrayBuffer (blob) 读取，以便能够将此 Blob 添加到 FormData 对象。

这就是我的最终代码的样子：

window.resolveLocalFileSystemURL(
cordova.file.dataDirectory + voiceMediaFilename,  
function(fileEntry) {
    fileEntry.file(function(file){
        console.log("getFile done for " + voiceMediaFilename);
        var reader = new FileReader();
        reader.onloadend = function() {
            console.log("reader done, starting fd ...");
            var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
            var fd = new FormData();
            fd.append("sender", uuid);
            fd.append("receiver", receiver);
            fd.append("timestamp", timestamp);
            fd.append("random", random);
            fd.append("type", messageTypeOwn);
            fd.append("duration", audioDuration);
            fd.append("media", blob, voiceMediaFilename);
            uploadMedia(fd, user, timestamp, messageTypeOwn, uuid, receiver, msgId);
            voiceMediaFilename = "";
        };
        reader.readAsArrayBuffer(file);
    }, 
    function(err){
        alert("Error getting file");
    });
},
function(err){
    alert("Error in resolveLocalFileSystemURL " + JSON.stringify(err));
});

【讨论】：