对 Blob 文件进行 JSON 化

Question

我正在尝试对 blob 文件进行 JSON 化，以便我可以通过 AJAX 请求发送它。我尝试使用下面的代码但没有成功。当我解析一个 JSONified 文件时，我只得到一个尺寸小得多的不同文件。

function test(blob, cb) {

        var fileReader = new FileReader()
        fileReader.readAsArrayBuffer(blob)
        fileReader.onloadend = function() {             

            // client
            var arry = Array.from(new Uint8Array(fileReader.result))
            var data = {data: arry }
            var json = JSON.stringify(data)

            // server
            var parse = JSON.parse(json)
            var arr = parse.data.buffer
            var blob = new Blob([arr])
       }        
}

Answer 1

您可以尝试使用FileReader.readAsDataURL() 方法，将数据以base64 编码的字符串形式发送，然后在服务器端对其进行解码。 Base64 字符串将比表示数组的 json 字符串小得多。

这是一个例子

function getBase64() {
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function () {
   document.getElementById("result").value = reader.result;
  }, false);
  
  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="getBase64()" />
<br/>
<textarea id="result"></textarea>

Answer 2

您可以使用 FormData.

JQuery 示例（为简单起见）：

var oFormData = new FormData();
$(':input', this).each(function (){
    if(this.name){
        var oValue = this.value;
        if(this.type == 'file'){
            oValue = this.files[0]; //TODO if "input file multiple" need loop each value
        }
        oFormData.append(this.name, oValue);
    }
});

$.ajax({
    url: 'http://example.com/xhr',
    type: "POST",
    data: oFormData,
    processData: false,
    contentType: false,
    error: function (oRequest, sTextStatus, oErrorThrown){
        console.log(sTextStatus);
    },
    success: function (oData, sTextStatus, oRequest){
        console.log(oData);
    },
});

对 Blob 文件进行 JSON 化

JSONifying a Blob file

javascript

json

blob

typedarray