如何获得javascript中的文件url数据？

Question

我尝试使用base64获取图像数据：

​

function previewFile() {
  const preview = document.getElementById('video1');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function() {
    // convert to base64
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="previewFile()"><br>

<video width="320" height="240" id="video1" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

​

这个脚本让你上传一个mp4文件，然后它会显示它。

问题是base64太长了。有没有其他方法来获取文件数据，但更短？

Answer 1

您希望将Blob url用于较短的src。

将Base64转换为Blob

更改：

reader.result

至：

window.URL.createObjectURL(file)

​

function previewFile() {
  const preview = document.getElementById('video1');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function() {
    // convert to base64
    preview.src = window.URL.createObjectURL(file);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="previewFile()"><br>

<video width="320" height="240" id="video1" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

​