파일 API - BLOB에서 JSON으로

파일 API - BLOB에서 JSON으로

HTML5, WebSocket, File API로 실험을 해보려고 합니다.Tomcat7 WebSocket 구현을 사용하고 있습니다.서블릿에서 문자메시지를 주고받을 수 있어요.이제 서블릿에서 클라이언트의 JSON 오브젝트로 송신하고 싶은데 클라이언트의 JSON.parse(또는 이와 유사한 것)를 건너뛰기 위해 텍스트 메시지를 피하고 싶기 때문에 바이너리 메시지를 보내려고 합니다.서블릿 부분은 매우 간단합니다.

String s = "{arr : [1,2]}";
CharBuffer cbuf = CharBuffer.wrap(s);      
CharsetEncoder encoder = Charset.forName("UTF-8").newEncoder();      
getWsOutbound().writeBinaryMessage(encoder.encode(cbuf));
getWsOutbound().flush();

이 메시지 뒤에 클라이언트에서 BLOB 오브젝트(http://www.w3.org/TR/FileAPI/#dfn-Blob)로 변환된 바이너리 프레임을 수신했습니다.문제는 BLOB에서 JSON 객체를 가져올 수 있느냐는 것입니다.FileReader 인터페이스(http://www.w3.org/TR/FileAPI/#FileReader-interface)를 살펴보고 다음과 같은 코드를 사용하여 FileReader가 수행할 수 있는 기능을 조사했습니다(첫 줄은 완전히 새로운 Blob을 생성하므로 필요에 따라 즉시 테스트할 수 있습니다).

var b = new Blob([{"test": "toast"}], {type : "application/json"});
var fr = new FileReader();
fr.onload = function(evt) {
    var res = evt.target.result;
    console.log("onload",arguments, res, typeof res);
};
fr.readAsArrayBuffer(b);

모든 "readAs"를 사용합니다.파일 리더 구현에서 본 방법(Chrome 22를 사용하고 있습니다).어쨌든 나는 쓸모 있는 것을 찾지 못했다.

뭐 제안할 거라도 있나요?감사해요.

대신 readAsText()를 시도해야 합니다.readAsArrayBuffer()(JSON은 마지막에 텍스트입니다).

오브젝트 문자열화(JSON 텍스트로 변환)도 실패했습니다.

var b = new Blob([JSON.stringify({"test": "toast"})], {type : "application/json"}),
    fr = new FileReader();

fr.onload = function() {
    console.log(JSON.parse(this.result))
};

fr.readAsText(b);

변환하다Blob/FileJavaScript 객체에 대한 JSON 데이터를 포함하는 경우 다음 명령을 사용합니다.

JSON.parse(await blob.text());

---

예를 들어 다음과 같습니다.

JSON 파일을 선택하면 브라우저 콘솔에서 사용할 수 있습니다.json오브젝트)

const input = document.createElement("input");
input.type = "file";
input.accept = "application/json";
document.body.prepend(input);
input.addEventListener("change", async event => {
    const json = JSON.parse(await input.files[0].text());

    console.log("json", json);
    globalThis.json = json;
});

네가 하고 있는 일은 개념적으로 틀렸다.JSON은 오브젝트 자체의 문자열이 아니라 오브젝트의 문자열 표현입니다.회선을 통해 JSON의 바이너리 표현을 전송하면 문자열의 바이너리 표현을 전송합니다.JSON 문자열을 JavaScript 개체로 변환하기 위해 클라이언트 측에서 JSON을 구문 분석할 필요가 없습니다.

반드시 클라이언트에 JSON을 텍스트로 전송하고 JSON.parse를 호출해야 합니다.다른 어떤 것도 너에게 쉽지 않을 거야.

let reader = new FileReader()
      reader.onload = e => {
        if (e.target.readyState === 2) {
          let res = {}
          if (window.TextDecoder) {
            const enc = new TextDecoder('utf-8')
            res = JSON.parse(enc.decode(new Uint8Array(e.target.result))) //转化成json对象
          } else {
            res = JSON.parse(String.fromCharCode.apply(null, new Uint8Array(e.target.result)))
          }

          console.info('import-back:: ', res)


        }
      }

      reader.readAsArrayBuffer(response)

언급URL : https://stackoverflow.com/questions/12786818/file-api-blob-to-json