如何用JavaScript将图片文件存入对象并推入数组

我需要把图片加载到对象中，再将该对象推入已有数组（数组内的对象包含硬编码的图片路径字符串）。目前表单的姓名、电话值能成功推入数组，但图片始终没有被加入对象。

原代码 #

JavaScript #

let thatArray = [{
    name: "webster",
    phone: "0771364325",
    img: "./person-1.jpeg"
}, {
    name: "ndhlove",
    phone: "077112233",
    img: "./zindunalogo.png"
}, {
    name: "webbyy",
    phone: "051561561545",
    img: "./oooo (2).jpg"
}];

const form = document.getElementById('contact-form');

form.addEventListener('submit', formFun);

function formFun(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = {};
    myFormData.forEach((value, key) => (formDataObj[key] = value));

    document.getElementById("imageUpload").addEventListener("change", function(e) {
        let newImg = new Image('350', '480');
        newImg.src = e.target.files[0];
        newImg.src = URL.createObjectURL(e.target.files[0]);
        formDataObj.appendChild(newImg);
    });

    thatArray.push(formDataObj);
    console.log(thatArray);

    const newJsonArray = JSON.stringify(thatArray);

    localStorage.setItem('array', newJsonArray);
};

HTML #

<body>
   <form id="contact-form">
      <div class="form-control">
         <label for="name">Full Name</label>
         <input id="name" name="name" type="text" />
      </div>
      <div class="form-control">
         <label for="phone">Phone number</label>
         <input id="phone" name="phone" type="number" />
      </div>
      <div class="form-control">
         <label for="image">Upload Image</label>
         <input type="file" id="imageUpload">
      </div>
      <button type="submit">submit</button>
   </form>
   <button class="addBtn">ADD</button>
   <div class="displayImagePreview">
      <img id="preview-selected-image" />
   </div>
</body>

问题分析 #

• 文件输入框无name属性：FormData依赖表单元素的name属性收集值，imageUpload没有设置name，所以无法被FormData捕获。
• 监听时机错误：在表单提交后才给文件输入框绑定change事件，此时用户已经完成文件选择并提交，监听永远不会触发。
• 对象操作错误：formDataObj是普通JavaScript对象，不是DOM元素，不能调用appendChild方法，应该直接给对象添加属性。
• 临时URL无法持久化：URL.createObjectURL生成的是临时URL，页面刷新后失效，且无法被JSON序列化存入localStorage。

修正方案 #

修改后的HTML（添加name属性） #

<body>
   <form id="contact-form">
      <div class="form-control">
         <label for="name">Full Name</label>
         <input id="name" name="name" type="text" />
      </div>
      <div class="form-control">
         <label for="phone">Phone number</label>
         <input id="phone" name="phone" type="number" />
      </div>
      <div class="form-control">
         <label for="image">Upload Image</label>
         <!-- 添加name属性，限制仅上传图片 -->
         <input type="file" id="imageUpload" name="img" accept="image/*">
      </div>
      <button type="submit">submit</button>
   </form>
   <button class="addBtn">ADD</button>
   <div class="displayImagePreview">
      <img id="preview-selected-image" />
   </div>
</body>

修改后的JavaScript（提前监听+转base64存储） #

let thatArray = [{
    name: "webster",
    phone: "0771364325",
    img: "./person-1.jpeg"
}, {
    name: "ndhlove",
    phone: "077112233",
    img: "./zindunalogo.png"
}, {
    name: "webbyy",
    phone: "051561561545",
    img: "./oooo (2).jpg"
}];

const form = document.getElementById('contact-form');
const imageUpload = document.getElementById('imageUpload');
const previewImg = document.getElementById('preview-selected-image');
let selectedImageBase64 = null;

// 提前监听文件选择，转成可序列化的base64格式并预览
imageUpload.addEventListener("change", function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
        selectedImageBase64 = event.target.result;
        previewImg.src = selectedImageBase64;
    };
    reader.readAsDataURL(file);
});

form.addEventListener('submit', formFun);

function formFun(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = {};
    myFormData.forEach((value, key) => (formDataObj[key] = value));

    // 将base64格式的图片存入对象
    if (selectedImageBase64) {
        formDataObj.img = selectedImageBase64;
    }

    thatArray.push(formDataObj);
    console.log(thatArray);

    // 序列化数组并存入localStorage
    const newJsonArray = JSON.stringify(thatArray);
    localStorage.setItem('array', newJsonArray);

    // 重置表单和预览状态
    form.reset();
    previewImg.src = '';
    selectedImageBase64 = null;
};

关键说明 #

1. 用FileReader将图片转成base64字符串，既可以正常预览，也能被JSON序列化，存入localStorage后刷新页面依然可用。
2. 提前绑定文件选择事件，确保用户选完文件后能及时处理图片数据。
3. 提交后重置表单和预览状态，方便下次输入。

内容的提问来源于stack exchange，提问作者Webster Ndhlovu