如何将拖拽获取的base64格式图片数据成功赋值给input输入框

核心问题说明 #

你当前的问题和base64转码无关，是浏览器安全机制限制：

• type为file的<input>元素的value属性是只读属性，仅允许用户通过系统文件选择窗口交互赋值，禁止任何JS代码直接写入，避免恶意脚本窃取用户本地文件。
• 你之前将文件转为base64赋值的逻辑完全不必要，反而绕了弯路。

正确实现方式 #

如果你需要兼容原有表单的提交逻辑，让拖拽选中的文件和用户手动选择的文件行为一致，可以通过DataTransfer接口把拖拽得到的File对象直接挂载到input的files属性上，不需要转base64。
修改后的代码如下：

dropArea.addEventListener("drop", (event) => {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    const validTypes = ["image/jpeg", "image/png"];
    if (validTypes.includes(file.type)) {
        // 创建DataTransfer对象挂载文件
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        // 直接给input的files属性赋值，不需要操作value
        input.files = dataTransfer.files;
        
        // 如果需要预览图片，再单独转base64赋值给img的src，和input赋值逻辑分开
        const fileReader = new FileReader();
        fileReader.onload = () => {
            const previewImg = document.querySelector('#preview');
            if(previewImg) previewImg.src = fileReader.result;
        }
        fileReader.readAsDataURL(file);
    } else {
        dropArea.classList.remove('active');
        alert('仅支持JPG、PNG格式的图片');
    }
})

额外场景：不需要依赖input提交的情况 #

如果你是通过AJAX/fetch异步提交文件，完全可以不操作input，直接把File对象塞进FormData提交即可：

// 提交示例
const formData = new FormData();
formData.append('upload_image', file); // 这里的file就是拖拽得到的File对象
fetch('/服务端上传接口地址', {
    method: 'POST',
    body: formData
}).then(res => res.json()).then(data => {
    // 处理上传结果
})

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