文件上傳時,因為base64文件字符串過長后端接收失敗的問題。

前言

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、base64編碼是什么？

Base64是一種用于將二進制數(shù)據(jù)轉(zhuǎn)換為ASCII字符集中可打印字符的編碼方法。它通常用于在不同系統(tǒng)之間傳輸二進制數(shù)據(jù)，因為許多系統(tǒng)只支持文本數(shù)據(jù)的傳輸。

二、實現(xiàn)步驟

1. 將要上傳的文件讀入到內(nèi)存中，并使用 FileReader 將其轉(zhuǎn)換成 Base64 編碼的字符串：

代碼如下（示例）：

const reader = new FileReader()
	reader.readAsDataURL(file) // 讀取文件并轉(zhuǎn)換成 Base64 編碼
	reader.onload = (event) => {
	  const base64String = event.target.result
	  // ...
}

2. 對 Base64 編碼的字符串進行分塊處理。因為在上傳大文件時，將整個文件的 Base64 編碼作為一個字符串直接上傳可能會導(dǎo)致瀏覽器崩潰或上傳失敗。因此，我們需要將 Base64 編碼的字符串分成多個較小的塊進行上傳

代碼如下（示例）：

const CHUNK_SIZE = 1024 * 1024 // 每個塊的大小為 1MB
const chunks = []
let start = 0
let end = CHUNK_SIZE
while (start < base64String.length) {
  chunks.push(base64String.slice(start, end))
  start = end
  end += CHUNK_SIZE
}

該處使用的url網(wǎng)絡(luò)請求的數(shù)據(jù)。

3. 上傳分塊數(shù)據(jù)。我們可以使用 axios 或其他 HTTP 庫來上傳數(shù)據(jù)。在上傳每個塊時，我們需要將其放入 FormData 中，并將其作為 HTTP 請求的 body 部分進行上傳。

代碼如下（示例）：

const formData = new FormData()
formData.append('file', chunk)
axios.post('/upload', formData)

該處使用的url網(wǎng)絡(luò)請求的數(shù)據(jù)。

4. 上傳完成后，在服務(wù)器端將所有分塊數(shù)據(jù)合并為一個完整的文件。具體的實現(xiàn)方法可以根據(jù)服務(wù)器端的語言和框架不同而有所不同。

代碼如下（示例）：

const reader = new FileReader()
reader.readAsDataURL(file) // 讀取文件并轉(zhuǎn)換成 Base64 編碼
reader.onload = (event) => {
  const base64String = event.target.result
  const CHUNK_SIZE = 1024 * 1024 // 每個塊的大小為 1MB
  const chunks = []
  let start = 0
  let end = CHUNK_SIZE
  while (start < base64String.length) {
    chunks.push(base64String.slice(start, end))
    start = end
    end += CHUNK_SIZE
  }
  let completedChunks = 0
  chunks.forEach((chunk) => {
    const formData = new FormData()
    formData.append('file', chunk)
    axios.post('/upload', formData)
      .then(() => {
        completedChunks++
        if (completedChunks === chunks.length) {
          // 所有分塊上傳完成，通知服務(wù)器合并文件
          axios.post('/merge', { filename: file.name })
        }
      })
      .catch((error) => {
        console.error(error)
      })
  })
}

以上是base64數(shù)據(jù)格式分塊上傳的詳細代碼 (前端處理)

總結(jié)

提示：這里對文章進行總結(jié)：

例如：以上是對base64編碼的處理流程，網(wǎng)上還有很多方法，包括原生API方式，有些可能是因為兼容性的問題，已被廢棄，當然還有一些性能方面的處理辦法, 如webworker。文章來源地址http://www.zghlxwxcb.cn/news/detail-529763.html

到了這里，關(guān)于前端實現(xiàn)base64編碼處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！