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 的形式创建一个指向文件的直接指针，该文件仅适用于该会话。这可以通过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);
}

Answer 2

您需要将文件上传到某种服务器（为您的 javascript 提供服务的后端），然后从那里开始

1. 验证文件
2. 将文件存储在某处的物理服务器（或云）上
3. 在数据库中添加一个条目，将上传文件的文件路径或 ID 与刚刚上传文件的用户相关联（以便您以后可以在需要时检索它）

因此，基本上，您不会将图像存储在数据库中，而是将其存储在某个文件共享/云主机上，而您只存储稍后下载/检索图像所需的内容。