如何將字節數組轉換為 base64 編碼格式？

Question

我有一個從 Postgres 數據庫下載文件的頁面。 現在我可以點擊以下 URL 來查看數據庫中存在的文件內容（存儲為字節）-HTTP://sandbox4.wootz.io:8080/api/blob/1/UploadFile/hope%20real.txt

由於當我單擊下載按鈕時數據存儲在字節（字節數組）類型的列中，它會下載文件，當我看到它的內容時，它會顯示為字節數組。

文件.txt（內容）

[\x58595a5052415445454b3123473b4c534e44204e474f49574853474849444748445348474d70253335]

下載功能

  axios({
      url: 'api/store/blob/UploadFile/' + data.chosenfile,
      method: 'GET',
      headers: {'session_id': data.sessionid},
      responseType: 'arraybuffer'
    }).then(response => {
console.log(response.data); //displays nothing (empty)
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
      console.log('fileURL is'+fileURL)
      var fileLink = document.createElement('a');
      console.log('fileLink is'+fileLink)
      fileLink.href = fileURL;
      fileLink.setAttribute('download', data.chosenfile);
      document.body.appendChild(fileLink);
      fileLink.click();
)

響應 object 的 console.log

{"data":{},"status":200,"statusText":"OK","headers":{"access-control-allow-origin":"*","connection":"keep-alive","content-length":"86","content-type":"text/html; charset=utf-8","date":"Mon, 06 Jul 2020 18:22:23 GMT","etag":"W/\"56-Vaz0hG1/FIgtEurgvK+wOU+4F4M\"","x-powered-by":"Express"},"config":{"url":"api/store/blob/UploadFile/hope real.txt","method":"get","headers":{"Accept":"application/json, text/plain, */*","Access-Control-Allow-Origin":"http://localhost","session_id":"c5b3b878-771e-4472-84eb-6de15686effa"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"responseType":"arraybuffer","xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1},"request":{}}

我的代碼的上傳文件部分（這是文件上傳到數據庫的方式）

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();

    reader.onload = () => {
      var base64Url = reader.result; 
      console.log(base64Url) //ENITRE BASE64 URL 
     
     
      resolve(base64Url.substr(base64Url.indexOf(',') + 1)); //will return only the base64string part from the base64 url
    };

    reader.onerror = reject;

    reader.readAsDataURL(file); 
  })
}

async function uploadFile(path, data) {
  try {
    
    let base64string = await readFileAsync(data.chosenfile);
    console.log('base64 content  is'+ base64string)

    let response = await axios({
      method: 'post',
      url: 'api/store/blob' + path,
      headers: {'session_id': data.sessionid},
      data: {"id":data.chosenfile.name, "file":   base64string }
    });    

    if (response.status == 200) {
      console.log(response.status);
    }
    return response.data;
  } catch (err) {
    console.error(err);
  }
}

我究竟做錯了什么？ 為什么我得到的文件內容為 [\x58595a5052415445454b3123473b4c534e44204e474f49574853474849444748445348474d70253335]？ 我應該怎么做才能在下載的文件中獲取實際文件的內容？

注意：關於上傳部分，我對所有類型的文件（excel 文檔、txt 文件等）使用相同的策略，將其編碼為 base64 編碼字符串，然后將其傳遞到 axios 后有效載荷中。現在這個有效載荷已通過到另一個名為 data-manager 的項目（與 postgres 數據庫交互）。所以當這個數據管理器項目收到我發送的有效負載時，它會在插入到類型 bytea 的表列之前將其轉換為字節 []。所以最終當我下載此表中的任何文件我都會以 bytea 格式獲取文件內容。

Answer 1

您的文件是正確的 ASCII 文本文件，其內容為[\x58595a5052415445454b3123473b4c534e44204e474f49574853474849444748445348474d70253335]字面意思。
當你下載它時你得到這個內容是非常好的，因為它就是這個文件的內容。

您想要的是從他們使用的十六進制表示中解析該內容到實際的 ArrayBuffer，最終將其再次讀取為 UTF-8 文本（或任何尊重 ASCII 的編碼）。

這必須在您下載文件並將其作為文本閱讀后完成。
您首先從該[\x - ]包裝器中將實際字節序列提取為十六進制，然后在每兩個字符處拆分結果字符串以獲取每個字節的十六進制值，最后將其解析為 Uint8Array 以取回原始數據：

 // for StackSnippet we need to hardcode the response // OP would have to make its request return that string const response = { data: String.raw`[\x58595a5052415445454b3123473b4c534e44204e474f49574853474849444748445348474d70253335]` }; //.then( (response) => { const encoded_text = response.data; // remove leading "[\x" and final "]" const encoded_data = encoded_text.slice( 3, -1 ); // split at every two chars, so we can get 0xNN, 0xNN const hex_bytes = encoded_data.match( /.{2}/g ); // as numbers (0 - 255) const num_bytes = hex_bytes.map( (hex) => parseInt( hex, 16 ) ); // wrap in an Uint8Array const view = new Uint8Array( num_bytes ); // from there you can generate the Blob to save on disk download( new Blob( [ view ] ), "file.txt" ); // but if you want to read it as UTF-8 text, you can: const as_text = new TextDecoder().decode( view ); console.log( as_text ); // } ); function download( blob, filename ) { const anchor = document.createElement( "a" ); anchor.href = URL.createObjectURL( blob ); anchor.download = filename; anchor.textContent = "click to download"; document.body.append( anchor ); }