JS如何获取Input新图片值？图片转数组及显示异常求解

核心问题 #

1. 图片预览逻辑错误：file.value是浏览器出于安全机制生成的伪路径，无法直接作为img的src值，这是导致src为空或undefined的直接原因。
2. 变量不匹配：创建input时使用的ID是finalArray[i].Id，但change事件中获取文件时用了materialId，若两者值不一致，会找不到目标input元素，导致file变量为undefined。
3. 数组转换冗余：手动循环将Uint8Array元素push到新数组的操作可以简化。

修复后的完整代码 #

let changePicInput = document.createElement("input");
changePicInput.type = "file";
// 统一ID变量，确保后续能准确获取到当前input
const inputId = `file-${finalArray[i].Id}`;
changePicInput.id = inputId;
changePicInput.style.display = "none";
// 新增：限制仅能选择图片文件，提升交互合理性
changePicInput.accept = "image/*";

changePicInput.addEventListener("change", function () {
    let arrBinaryFile = [];
    // 直接通过事件目标获取文件，避免变量不匹配问题
    const file = this.files[0];
    if (!file) return; // 未选中文件时直接退出，避免后续报错

    // ========== 图片即时预览 ==========
    // 使用URL.createObjectURL生成临时预览地址，这是浏览器原生的高效预览方案
    imgPicture.src = URL.createObjectURL(file);
    // 可选：图片加载完成后释放临时URL，避免内存泄漏
    imgPicture.onload = function() {
        URL.revokeObjectURL(this.src);
    }

    // ========== 将文件转换为二进制数组 ==========
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = function (evt) {
        if (evt.target.readyState === FileReader.DONE) {
            const arrayBuffer = evt.target.result;
            // 直接将Uint8Array转为普通数组，省去手动循环的冗余代码
            arrBinaryFile = Array.from(new Uint8Array(arrayBuffer));
            // 此处可添加对arrBinaryFile的后续处理逻辑
            console.log("转换完成的二进制数组：", arrBinaryFile);
        }
    }
});

关键优化说明 #

• 预览逻辑修正：用URL.createObjectURL(file)生成浏览器可识别的临时预览地址，替代无效的file.value。
• 变量一致性保证：通过this.files[0]直接获取当前触发事件的input的文件，彻底避免变量名不匹配的问题。
• 数组转换简化：利用Array.from()直接将Uint8Array转为普通数组，简化代码逻辑。
• 安全校验：增加if (!file) return判断，处理未选中文件的边界情况。
• 内存优化：图片加载完成后调用URL.revokeObjectURL释放临时资源，避免内存占用过高。

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