社交媒体应用开发中用户上传图片无法显示问题求助

• 你当前直接读取type="file"输入框的value属性获取到的是浏览器出于安全策略生成的虚假本地路径，无法直接作为图片资源路径加载。
• input类型为file的控件，选中的文件实际存储在files属性的类数组中，需要从这里读取选中的文件对象。

JS代码调整 #

document.getElementById('formBtn').onclick=()=>{
    let newTitle = document.getElementById('newTitle').value.trim();
    let imgFile = document.getElementById('newImg').files[0];

    // 新增非空校验，避免非法提交
    if (!newTitle) {
        alert('请填写作品标题');
        return;
    }
    if (!imgFile) {
        alert('请选择要上传的图片');
        return;
    }

    // 生成浏览器可识别的本地临时资源链接
    let imgTmpUrl = URL.createObjectURL(imgFile);

    let fragment = `
       <img class="art_img" src="${imgTmpUrl}" alt="${newTitle}">
       <p class="art_title">${newTitle}</p>`;

    artContainer.innerHTML += fragment;
    // 可选：上传完成后重置表单，方便后续操作
    document.getElementById('form').reset();
}

如果你的社交媒体应用需要把用户上传的图片持久化存储、让其他用户也能看到，还需要额外做以下处理：

• 把选中的文件对象封装到FormData中，通过POST请求传给你的后端存储接口
• 后端存储完图片后返回对应的线上资源URL，你再把这个URL赋值给img标签的src属性即可实现公网可访问
• 上述代码生成的临时URL在页面刷新后就会失效，仅适合本地预览场景使用

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