ブレークポイントアップロードの実践

最初の文章は、文章が腐っていて、技術が下手で、大物たちは噴き出すのが好きではありません.55555
背景
一回面接に行って、自分に穴を掘って、ブレークポイントのアップロードができたかどうかを聞かれて、その原理を知っていて、瞬間的に愚かな状態に入りました.降りてからネットでいくつかの資料を調べて、簡単なdemoを書きました.
げんり
ブレークポイントアップロードは、その名の通り、1つのファイルを複数回に分けてアップロードできます.コアポイントは、フロントエンドがファイルをバックエンドにブロックし、バックエンドが接続され、最後に完全なファイルがアップロードされます.
html 5はFileApiを提供し、fileを使用することができます.sliceはファイルをブロックし、html 5をサポートしないflashで実現できる
コード#コード#
フロントエンドコード

function upload(file) {
  var cache = 0
  var thunk = 1024
  var totalSize = file.size
    
  send()
    
  function send() {
    var form = new FormData()
    form.append('file', file.slice(cache, cache + thunk))
    form.append('fileName', file.name)
    ajax(form, function(response) {
      cache = cache + thunk
      document.getElementById('uploadProgress').innerText = (cache / totalSize > 1 ? 1 : cache / totalSize) * 100 + '%'
      if (cache < totalSize) {
        send()
      }
    })
  }
}
    
function ajax(data, cb) {
  var xhr = new XMLHttpRequest()
  xhr.open('post', '/upload')
  xhr.send(data)
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        cb && cb(xhr.reponse)
      }
    }
  }
}

バックエンドコード

const file = ctx.request.body.files.file
const fileName = ctx.request.body.fields.fileName
const reader = fs.createReadStream(file.path)
reader.on('data', function(chunk) {
  //     
  reader.pause()
  fs.appendFile(path.join(__dirname, 'upload', fileName), chunk, function(err) {
    if (err) {
      ctx.body = 'error'
    }
    //     
    reader.resume()
  })
})

reader.end(function() {
    ctx.body = 'completed'
})

まとめ
もちろん、機能には多くの欠陥があります.例えば、複数のブロックを同時にアップロードする方法、手動で一時停止する方法、アップロードされた状態を保存する方法など、後で徐々に改善されます.
Byパス(Chris Wong)