JavaScript FileReader 海量结果

Question

我有一个 FileReader，可以让用户将文件(图像)上传到我的网站。

这是执行读取的代码:

$("input[type='file']").change(function(e) {

    var buttonClicked = $(this);

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
            img.src = reader.result;                

            console.log(reader.result);

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

一切都很好，直到我尝试打印结果。我使用这个文件作为例子:

当我 console.log() 结果时，它吐出超过 95000 个字符。

该图像的大小与我将接受到我的网站中的图像的大小特别相同。

我希望将这些图像也存储在数据库中，所以我想知道如何使用如此长的图像源来实现这一点。有没有办法缩短这个时间或以不同的方式获取图像路径？

我更好奇为什么它们这么长，但如果有人有存储这些的技巧(每个用户 100 个，500 多个用户)那就太好了!

谢谢-

Answer 1

将文件存储为...文件。

很少有用例需要 FileReader 的 toDataURL() 方法，因此每次使用它时，您都应该问自己为什么需要它。

就您而言:

• 在页面中显示图像。为此，不要使用 FileReader，而是以 url 的形式创建指向文件的直接指针，仅适用于此 session 。这可以通过 URL.createObjectURL(File_orBlob) 来实现方法。
• 将此图像存储在您的服务器上。不要存储 ~37% bigger base64 version ，直接将文件发送并存储为文件(多部分)。这可以通过 FormData API 轻松实现.

inp.onchange = function(){
  var file = this.files[0];
  if(file.type.indexOf('image/') !== 0){
    console.warn('not an image');
    }
  var img = new Image();
  img.src = URL.createObjectURL(file);
  // this is not needed in this case but still a good habit
  img.onload = function(){
    URL.revokeObjectURL(this.src);
    };
  document.body.appendChild(img);
  }

// not active but to give you da codez
function sendToServer(){
  var file = inp.files[0];
  var form = new FormData();
  // here 'image' is the parameter name where you'll retrieve the file from in the request
  form.append('image', file); 
  form.append('otherInfo', 'some other infos');
  var xhr = new XMLHttpRequest();
  xhr.open('post', 'yourServer/uploadPage')
  xhr.onload = function(){
    console.log('saved');
    };
  xhr.send(form);
  }

<input type="file" id="inp">

如果您需要 PHP 代码来检索此请求中的文件:

if ( isset( $_FILES["image"] ) ){
  $dir = 'some/dir/';
  $blob = file_get_contents($_FILES["image"]['tmp_name']);
  file_put_contents($dir.$_FILES["image"]["name"], $blob);
}