javascript - 文件上传 ReadAsDataUrl

Question

我有一个关于 File API 的问题以及用 JavaScript 上传文件以及我应该如何执行此操作。

我已经使用了一个非常简单的文件 uploader ，它只是从输入中获取文件并向服务器发出请求，然后服务器处理这些文件并将副本文件上传到服务器上的上传目录中。

但是，我试图让人们可以选择在上传文件之前预览文件。因此，我利用了 File API，特别是 new FileReader() 和下面的 readAsDataURL()。

文件对象具有 .size 和 .lastModifiedDate 等属性列表，我将 readAsDataURL() 输出添加到我的文件中对象作为属性，以便在我的 Angular ng-repeat() 中轻松访问。

我的问题是，当我这样做时，我想到我可以将 dataurl 存储在数据库中而不是上传实际文件？我不确定直接使用文件数据的 dataurl 作为属性修改文件数据是否会影响其传输。

最佳实践是什么？上传文件更好还是可以只存储 dataurl 然后输出它，因为这本质上是文件本身？我不应该直接修改文件对象吗？

谢谢。

编辑:我还应该注意，这是一个客户项目，希望用户很难简单地从应用程序中获取上传的内容并保存它，然后重新分发它。将文件保存为数据库中的 URL 会减轻右键单击另存为行为的影响吗？

Answer 1

预览文件的方法不止一种。正如您提到的，第一个是带有 filereader 的 dataURL 。但还有URL.createObjectURL哪个更快

与二进制格式相比，与 Base64 进行解码和编码将花费更长的时间，需要更多的计算、更多的 CPU/内存。

我可以在下面演示

var url = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG'


fetch(url).then(res => res.blob()).then(blob => {

  // Simulates a file as if you where to upload it throght a file input and listen for on change
  var files = [blob]

  var img = new Image
  var t = performance.now()
  var fr = new FileReader

  img.onload = () => {
    // show it...
    // $('body').append(img)

    var ms = performance.now() - t
    document.body.innerHTML = `it took ${ms.toFixed(0)}ms to load the image with FileReader<br>`


    // Now create a Object url instead of using base64 that takes time to
    // 1 encode blob to base64
    // 2 decode it back again from base64 to binary
    var t2 = performance.now()
    var img2 = new Image
    img2.onload = () => {
      // show it...
      // $('body').append(img)
      var ms2 = performance.now() - t2
      document.body.innerHTML += `it took ${ms2.toFixed(0)}ms to load the image with URL.createObjectURL<br><br>`
      document.body.innerHTML += `URL.createObjectURL was ${(ms - ms2).toFixed(0)}ms faster`
    }
    img2.src = URL.createObjectURL(files[0])

  }
  fr.onload = () => (img.src = fr.result)
  fr.readAsDataURL(files[0])

})

base64 将增大约 3 倍。对于移动设备，我认为您会希望节省带宽和电池。

但是执行额外请求也会产生延迟，但这就是 http 2 来拯救的地方