如何将上传的图像添加到对象数组中？答案

【问题标题】：How can I add an uploaded image into an object array?如何将上传的图像添加到对象数组中？
【发布时间】：2020-03-07 08:05:42
【问题描述】：

我正在创建一个专辑网站，只是为了学习 Javascript。我有输入框来添加专辑的标题、艺术家和年份。当按下“添加专辑”时，它会将此信息插入到名为 albumList 的对象的数组中，然后在列表元素中显示该信息。我想知道是否可以允许用户也上传一张图片，该图片也被推送到数组中并与标题、艺术家和年份一起显示。

我已经尝试了所有我能想到的东西，并在谷歌上搜索了一整天，但没有运气。这甚至可能吗？这是我目前的 JS，我已经删除了我尝试上传图片的所有内容，以便给我一个干净的状态，可以这么说：

var albumList = {
    albums: [],
    addAlbum: function(title, artist, year) {
        this.albums.push({
            title,
            artist,
            year
        });
    }

};


var handlers = {
    addAlbum: function() {
        var addAlbumTitle = document.getElementById("addAlbumTitle");
        var addAlbumArtist = document.getElementById("addAlbumArtist");
        var addAlbumYear = document.getElementById("addAlbumYear");

        albumList.addAlbum(addAlbumTitle.value, addAlbumArtist.value, addAlbumYear.valueAsNumber);
        view.displayAlbums();
    }
};


//Only used to display info on screen. 
var view = {
    displayAlbums: function() {
        var albumUl = document.querySelector('ul');
        albumUl.innerHTML = '';

        albumList.albums.forEach(function(album, position) {
            var albumLi = document.createElement('li');
            var showAlbum = '';
            showAlbum = album.title + ' ' + album.artist + ' ' + album.year;

            albumLi.id = position;
            albumLi.textContent = showAlbum;
            albumUl.appendChild(albumLi);
        });
    }

};

还有我的 HTML：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <h1>My top 100 albums</h1>   

    <div>
        <input id="addAlbumTitle" type="text" placeholder="Title">
        <input id="addAlbumArtist" type="text" placeholder="Artist">
        <input id="addAlbumYear" type="number" placeholder="Year">   
    </div>

    <button onclick="handlers.addAlbum()">Add Album</button>

    <ul></ul>

    <script src="test.js"></script>
</body>



</html>

【问题讨论】：

标签： javascript arrays image

【解决方案1】：

我认为您误用了“上传”一词。由于您只是在玩客户端，因此您实际上并没有在任何地方上传任何东西。

您可以使用<input type='file'> 加载用户提供的本地图像文件，然后使用blobs 将数据存储在您的数组中。由于输入提供的File 对象只是特定类型的blob，因此无需转换即可存储数据。

您可以通过将图像的src 属性设置为使用URL.createObjectURL 创建的URL 来显示存储在blob 中的图像。

这是一个工作示例：

'use strict';

const myImages = [];

function addImage(imageBlob) {
  myImages.push(imageBlob);
}

function redrawImages() {
  const divForImages = document.getElementById('myImages');
  divForImages.innerHTML = '';
  myImages.forEach((imageBlob) => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(imageBlob);
    divForImages.appendChild(img);
  });
}

function addImageAndRedraw() {
  const fileInput = document.getElementById('fileInput');
  if (fileInput.files.length === 1) {
    addImage(fileInput.files[0]);
    redrawImages();
  } else {
    alert('No file selected. Select a file and try again.');
  }
}

const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My images</h1>
    <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
    <input id="button" type="button" value="Add image and redraw">   
    <hr>
    <div id="myImages"></div>
    <script src="album.js"></script>
  </body>
</html>

【讨论】：

【解决方案2】：

假设您将有一个手动输入专辑信息的屏幕，您还可以像 Carl 在此答案中所做的那样添加一个用于上传文件的输入：

https://stackoverflow.com/a/31710348/10355063

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");

fileTag.addEventListener("change", function() {
  changeImage(this);
});

function changeImage(input) {
  var reader;

  if (input.files && input.files[0]) {
    reader = new FileReader();

    reader.onload = function(e) {
      preview.setAttribute('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

从那里，您应该能够创建一个 Image 对象并将其正常添加到您的数组中。从那里获取对象的 src 并将其与您的专辑信息的其余部分一起显示。

<input type="file" id="filetag">
<img src="" id="preview">

【讨论】：

嗨，谢谢。我会试一试。但是，我对实现此代码后要做什么感到有些困惑。我是否需要更改我的 addAlbum 函数以获取额外的“图像”变量，并且在我的显示相册函数中，我是否需要调用诸如 albums.image.src 之类的东西来在屏幕上显示图像？
是的，您需要将图像添加到您的阵列中。最好的方法可能是创建一个 Image 对象并将其包含在您的参数中。至于显示图像，你应该将HTML中图像元素的src设置为图像对象的src，是的。