如何将Cloudinary上传图片URL注入表单输入框并随表单提交到MongoDB

现有代码核心问题 #

• URL输入框重复声明value属性，同时绑定了独立的image状态和表单绑定的newTrack.url字段，数据绑定冲突
• 上传图片拿到Cloudinary返回的URL后，仅存储在独立的image状态中，未同步到表单对应的newTrack.url字段，导致提交表单时没有携带图片URL
• 按钮同时绑定了图片上传和表单提交逻辑，执行顺序混乱，可能出现未拿到上传结果就先提交表单的问题
• URL输入框和文件选择框都使用了name="url"，重复命名会干扰表单handleChange的正常逻辑
• 渲染时所有图片都读取全局的image状态，没有用每个track自身绑定的URL，所以新上传的图片会覆盖所有展示内容

修复步骤 #

1. 修改图片上传成功后的回调逻辑 #

拿到上传后的URL时，同步更新表单的newTrack.url字段：

const uploadImage = () => {
    if(!imageSelected) return
    const formData = new FormData()
    formData.append('file', imageSelected)
    formData.append('upload_preset', 'musicimages')
    Axios.post('https://api.cloudinary.com/v1_1/dklcmfo0q/image/upload', formData)
    .then((res) => {
        const imgUrl = res.data.url
        props.setImage(imgUrl)
        // 模拟handleChange的触发参数，同步更新表单url字段
        props.handleChange({
            target: {
                name: 'url',
                value: imgUrl
            }
        })
    })
};

2. 修正表单的错误属性 #

• 删除URL输入框重复的value绑定，将onChange改为绑定handleChange，可添加readOnly避免用户手动修改自动填充的URL
• 修改文件选择框的name属性，避免和URL输入框重名

{/* URL输入框修正后 */}
<div>
  <label>URL<input name="url" value={props.state.newTrack.url} onChange={props.handleChange} readOnly /></label> 
</div>

{/* 文件选择框修正后 */}
<div>
  <label>上传封面<input name="coverImg" type="file"    
     onChange={(e) => setImageSelected(e.target.files[0])} /> 
  </label>
</div>

3. 调整提交逻辑（可选优化） #

如果不需要用户单独点上传按钮，可以把上传逻辑整合到表单提交流程里：点击提交按钮后先上传图片，拿到URL后再提交完整表单数据到后端，避免用户漏点上传导致URL为空。

4. 调整渲染逻辑 #

展示track列表时，每个图片的src读取对应track自身的url字段，不要读取全局的image状态，即可解决新上传图片覆盖所有展示内容的问题。

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