表单提交时未选文件触发createObjectURL报错的解决需求

错误原因 #

1. 提前执行createObjectURL：你在判断是否选中文件之前就调用了URL.createObjectURL(PrimerArchivo)，当未选文件时PrimerArchivo是undefined，而createObjectURL要求传入Blob/File类型对象，传入undefined直接触发类型错误。
2. 错误的赋值逻辑：objectURL是字符串类型，你试图通过objectURL.URL.createObjectURL("")修改它，这完全不符合语法，且createObjectURL也不能接收空字符串作为参数。

修正后的代码 #

submit.addEventListener('click', function(procesarImagen){
    procesarImagen.preventDefault();
    cont_rev_add.style.display = "none"
    rev_add.style.display = "initial"
    
    const archivo = input_file.files;
    let objectURL = ""; // 初始设为空字符串
    
    // 先判断是否存在选中的文件
    if (archivo && archivo.length > 0) {
        const PrimerArchivo = archivo[0];
        objectURL = URL.createObjectURL(PrimerArchivo);
        
        // 可选优化：后续不再使用该URL时，调用以下代码释放内存
        // URL.revokeObjectURL(objectURL);
    }

    review.push({
        name: `${input_name.value}<br> <span id='title_t'>${input_profession.value}</span>`,
        texto_review: input_review.value,
        img_review: objectURL
    });
});

关键修改点 #

• 先初始化objectURL为空，再根据文件存在与否决定是否生成URL。
• 将createObjectURL的调用放在判断分支内部，确保仅当存在有效文件时才执行该方法。
• 用模板字符串简化name字段的拼接，提升代码可读性。

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