Javascript 将img（文件）传输到另一页

我有一个包含元素的页面

<input type="file" id="dialog-select-files"  multiple="" accept="image/jpeg" name='files[]'>

并保存在饼干里

在我的第二个页面上，我从cookies中获取URL，创建元素“img”，并在页面上显示它：

var img = document.createElement("img");
img.src = getCookie(nameCookie);
gallery.appendChild(img);

但URL是blob URL，就像 blob:在我的第二页上找不到

我应该如何将所选文件从一个页面传递到另一个页面？我想我应该用另一种方法（不是保存在cookie中），但我在互联网上找不到解决方案

---

谢谢。

您可以将其转换为base64字符串，然后您可以将其保存在Cookie、localStorage或sessionStorage中，然后从那里获取

function img2base64(imgSrc, cb) {
  var img = new Image();
  // formats: image/png, image/jpeg, image/jpg, image/gif, image/bmp
  var outputFormat = 'image/png';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    cb(dataURL);
  };
  img.src = imgSrc;
}

var base64Str;
img2base64(imgSrc, function(dataUrl) {
   // do something
   console.log(dataUrl);
   base64Str = dataUrl;
   localStorage.setItem('img1', dataUrl);
});

---

您可以使用sessionStorage或localStorage来存储这个propuses@Galina是否有不能使用服务器端的原因？我不鼓励会话存储和/或本地存储，因为它们对大小有限制，而且多个图像很容易超过该限制。Nick，你是说这个？在第一页上：我将文件发送到服务器上的服务器：在第二页上创建文件链接：我确实收到服务器的请求并获得链接吗？我没有理由不使用服务器端，我正在学习，我不认为这是一个更好的方法。谢谢您的回答，我将尝试使用服务器端。@GalinaNiukhalova您的服务器上已经有图像了吗？它们是存储在服务器上的某个位置，还是存储在数据库中？

function img2base64(imgSrc, cb) {
  var img = new Image();
  // formats: image/png, image/jpeg, image/jpg, image/gif, image/bmp
  var outputFormat = 'image/png';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    cb(dataURL);
  };
  img.src = imgSrc;
}

var base64Str;
img2base64(imgSrc, function(dataUrl) {
   // do something
   console.log(dataUrl);
   base64Str = dataUrl;
   localStorage.setItem('img1', dataUrl);
});