当我动态设置上传输入的属性“data-form-data”时，Cloudinary 直接浏览器上传失败

Posted 2023-03-25

【中文标题】当我动态设置上传输入的属性“data-form-data”时，Cloudinary 直接浏览器上传失败

【英文标题】：Cloudinary direct browser upload failed when i dynamically set attribute 'data-form-data' of upload input

【发布时间】：2014-08-20 15:17:48

【问题描述】：

使用此代码可以正确完成上传

<script>
var data =  "timestamp": "1403951115",
"callback": "http://localhost:8080/SimpleServlet/cloudinary_cors.html",
"signature": "3b1a708393db7cd0ef1df2be0c602ea99d9c64c3",
"api_key": "742866863611915" ;
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>

如果我为“data-form-data”属性设置动态值，则上传失败并出现错误： "使用未签名上传时，上传预设必须指定上传预设"

请注意，我使用 ajax 异步调用 cloudinary 服务器来设置动态数据值以获取凭据。

【问题讨论】：

请同时提供一些代码

【参考方案1】：

通过调用$(...).attr('data-form-data', json)修改cloudinary-fileupload字段的参数不起作用，因为初始化后不会重新读取该属性的值，因此该调用无效。 可能的后果是 401 Unauthorized (e.g. 由于 Unknown API Key) 错误和使用的原始参数。

更新上传参数的正确方法是调用$(...).fileupload(formData: data)，其中data是参数散列（不是JSON序列化的）。

【参考方案2】：

为了避免这个问题并从头开始，我使用了以下方法：

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
<script>
    cloudinary.setCloudName('YOUR_CLOUD_NAME');
    cloudinary.openUploadWidget(upload_preset: 'your_unsigned_preset_name', function(error, result) //...
    )
</script>