Cloudinary 小部件，用于在表单中上传图像

Posted 2023-03-25

【中文标题】Cloudinary 小部件，用于在表单中上传图像

【英文标题】：Cloudinary Widget for Image Upload in Form

【发布时间】：2019-11-14 15:21:20

【问题描述】：

我有一个用于创建/更新播放列表的表单组件。这包括一些输入字段，例如“名称”和“描述”。我还有一个图片上传按钮，可以打开 Cloudinary 小部件。问题是，一旦打开小部件，它就会自动提交我的表单。

我没有看到任何用于防止这种情况发生的 cloudinary 小部件的道具。我看到的每个使用此小部件的示例都只是上传图像，而不是与表单结合使用。

（我正在使用 Semantic UI 的 React 库进行样式设置）

这不可能吗？

//form 
<Form onSubmit=this.handleSubmit>
    <Form.Field required>
        <label>Name</label>
        <input
            placeholder='Name'
            value=this.state.name
            name="name"
            onChange=(event) => this.handleChange(event)
        />
    </Form.Field>
    <Form.TextArea
        label='Description'
        value=this.state.description
        placeholder='Description'
        name="description"
        onChange=(event) => this.handleChange(event)
    />
    <Form.Field >
        <label>Image</label>
        <Button onClick=() => this.openWidget()>Upload Photo</Button>
        /* <input id="upload" type="file" name="image" onChange=(event) => this.handleChange(event)/> */
    </Form.Field>
    <Button type='submit'>Submit</Button>
</Form>

//button callback to open widget

openWidget = () => 
        window.cloudinary.createUploadWidget(
         
           cloudName: CLOUD_NAME,
           uploadPreset: "u9gezupm"
         ,
         (error, result) => 

           if (result && result.event === "success") 
             // debugger
             this.setState(
               image: `https://res.cloudinary.com/$CLOUD_NAME/image/upload/$result.info.path`, uploaded: true
             );
           
         
       ).open()
      

我希望流程如下：

点击了表单按钮 表单模式打开 填写的名称/描述字段 点击图片按钮 Cloudinary 小部件打开 用户上传图片。 成功上传会关闭小部件，返回到带有图像预览的表单。 用户点击“提交”提交表单，将数据发送到后端/Cloudinary。

我也对 Cloudinary 的其他替代品持开放态度。

【问题讨论】：

不幸的是，我无法重现这一点。纯 javascript 是否会发生这种情况，您是否能够共享重现此问题的 CodePen/JSFiddle 或类似的 sn-p（JS/React）？另外，我也会尝试在 openWidget(e) 回调函数中使用e.preventDefault();。

【参考方案1】：

您设法解决了这个问题吗？ 我也遇到了同样的问题，我设法使用 inlineContainer 选项

看看： Image widget uploader

【参考方案2】：

试试这个：

<Button type="button" onClick=() => this.openWidget()>Upload Photo</Button>

【讨论】：

edit你的答案并添加一些上下文会使它对其他人更有用。