Question

我正在尝试JSONify一个blob文件，以便我可以通过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);
    },
});

JSONifying Blob文件

2 个答案: