上传部件

云形上传部件是一个完全交互用户界面,使用户能够从各种源头上传文件到网站或应用程序上传文件部件只需几行代码整合,消除内部交互媒体上传能力开发需求

上传部件响应性调整适配可用宽度,显示功能自动调整用于移动应用

部件提供从各种上传源码举例说:本地设备,远程URL,设备相机,图像搜索,广受欢迎的社交媒体账号 和各种存储摄影网站部件支持拖放功能、交互裁剪、上传进度标识和缩略图预览部件还监控处理上传错误并提供大事件处理整合自身代码

可执行部件未签名上传直接从浏览器到云存储器,不参与过程部件发送JavaScript回调成功上传,这样你就可以把上传过程反馈回媒体管道可额外配置云端发送服务器端回调高级用户也可以使用带上传部件签名上传安全性强进程

上传后图像和视频可重新缩放、裁剪并由飞云转换,以便按需嵌入网站或移动应用

上传部件只需纯JavaScript整合并易用

快速示例

Cloudinary上传部件登录网站并无签名上传文件,包括部件远程JavaScript文件createUploadWidget初始化部件法 :

• 产品环境云名
• 上头上传预置上传文件使用

初始化后部件准备按需完成下样本中包括编码绑定点击事件按钮元素网页调用部件打开方法学并显示初始化部件

简单上传部件示例可按下按钮测试 :

下按钮用几个额外参数执行以显示额外能力

下页其余部分描述这些和多选项

代码探索者:上传部件示例

查一上传部件沙盒很容易前置试样配置修改

云化上传部件视频教程

视频展示使用代码沙盒集成基本上传部件

教程内容

如何搭建并整合上传部件到网站或应用

面向大都可设置上传部件无签名上传使用非签名上传部件快速简单提供UI用户可上传内容到网站

签名上传需要多点设置和编码,但在需要时提供更安全上传过程

无签名上传

无签名上传比签名上传安全性略小举例说,客户可以检查客户端HTML代码查找云名预置并使用信息上传非文件到云化产品环境正因如此 无签名上传保护性约束.举例说,现有资产不可覆盖未签名预设选项还限制文件大小或类型,用户可使用预设上传到云产品环境

设置并添加非签名上传部件

1. 内含云部件JavaScript文件网页中
   https://upload-widget.www.aaaalireno.com/global/all.js

   例举 :

   注解

   • 时同时使用上传部件并视频播放器同页视频播放脚本必须先加载以避免冲突
   • 支持互联网探索者11时,不使用代码中的任何快捷向导函数,并包含相关回填多填脚本,如:s大全
重要点

微软结束支持互联网探索者11 2022年6月15日.从此日期开始,云化元件和SDKs可能不象IE11预期的那样运行,我们将不再测试或支持浏览器

2. 可选性全局设置云名.网页多部件使用setCludName指令页面所有部件上传到同一种云式产品环境的方法或,您可设置产品环境云名为每个部件创建调用参数

3. 创建非签名上传预置.内上传控制台设置页面创建新非签名上传预置预置安全置换形式,允许客户端非签名上传提供元件创建调用预设名
   if you've never创建无签名预置件,你必须先选择启动非签名上传执行时空上传预设自动创建或选,你可以使用管理员API创建非签名上传预置.
   可选编辑预置修改名称或应用可用上传选项,例如应用进化转换控制资产用户使用部件上传大小或类型或自动生成某些热切转换细节见上传预置.

4. 添加部件.使用对象部件初始化方法创建部件调用方法时指定上传预置上步创建云化Name(如果你没有设置它)全局性外加部件选项需要应用
   举例说,模范实例上页前段createUploadWidget方法调用包括裁剪选项帮助用户定义裁剪坐标文件夹选项从部件上传所有图像到指定的文件夹 :

签名上传

避免提供上传预设名,您初始化部件使用公共API密钥签名上传并生成上传签名,当页面加载或上传请求提交时生成签名

安装并实现签名上传部件

1. 后续步骤1-2上方.

2. 可选性创建签名上传预置.使用上传部件签名时,不需要上传预置可选择创建签名预置定义预设上传预置并提供预设名上传预置选项调用部件创建法

3. 选择字符串或函数上传签名类型并准备必备代码

   • 字符串:

     • 需要页面连接网页加载服务器生成签名
     • 要求所有签名参数在页面加载时已知用户输入会影响参数,例如,使用部件交互裁剪选项时,必须使用函数选项
     • 签名从签名使用时印起一小时有效用户长时间开放页面时签名字符串过期

     • 提供签名字符串时必须使用所有参数生成,包括源码Uw(这是由上传部件自动发送的隐藏参数,但仍必须包括在字符串中签名)。举例说,字符串签名似似:public_id=dog&source=uw×tamp=155307631&upload_preset=myPreset.

       注解

       字符串中参数签名需要按字母顺序排序并需要 蛇盒,它与构件参数使用 columCase对比细节生成签名字符串见 生成验证签名.

   • 函数转换:

     • 需要创建函数生成签名
     • 函数运行时提交上传请求,因此时间戳不冒过期风险,如果用户保持页面开放

     • 函数接收上传最终参数,包括受用户交互作用影响的任何参数

       样本函数:
       下方示例函数使用服务器端点生成签名
   重要点

   时间戳值由部件提供 mas_to_sign)不创建自己的时间戳值

4. 添加部件.使用对象部件初始化方法创建部件调用方法时具体说明api_key...云化Name(如果你没有设置它)全局性),上传签名字符串或函数uploadSignatureTimestamp并附加部件选项需要应用
   举例说applyUploadWidget方法创建上传部件并调用前步显示签名函数

代码探索者:签名上传使用上传部件

节点js应用演示使用上传部件执行签名上传部件构造signed-uploads/public/js/uploadclientwidget.js签名生成signed-uploads/modules/signuploadwidget.js中使用api_sign_request方法论

参见此示例GitHub.

第三方上传源

除我文件、Web地址和Camera源外,上传部件支持各种第三方上传源码供用户上传图像和视频源由多标签或选项向用户展示(移动/响应),以便用户选择相关源,浏览文件并选择想上传文件当源数超出可用部件宽度时,旋转滚动箭头添加

可不滚动显示源数取决于选定源标签值长度默认标签文本7-8源可同时显示if you自定义或翻译标签中,滚动箭头可用或多或少源显示

响应宽度小于768px时,部件切换器用折叠侧菜单移动显示

源参数

上头源码参数接受数组字符串值定义源选项添加到上传部件中,即每个源定义部件内一个新的上传标签或源选项上头源码参数可包含在创建上传部件时使用的方法中,并仅在想限制可用源时指定(所有源均默认添加,如果省略此参数)。可能的值源码参数如下:

值传	描述性
本地化	从本地设备上传文件添加my文件源选项
URL	从远程位置上传文件添加web地址源选项
摄像头	通过设备相机上传图像文件添加摄像头源选项 注解:只有桌面/笔记本机-移动设备摄像头通过本地化源选项
滴箱	上传文件从您的 Drobox帐户添加滴箱源选项
图像搜索	上传文件使用Google搜索引擎添加图片搜索源选项
百叶窗	shutterstock账号上传图像添加百货公司源选项
Getyimages模拟	Getty图像账号上传图像添加Getyimages模拟源选项
istock使用	上传iStock账号图像添加iStock系统源选项
松开斜线	上传自Unsprash图像添加卸载斜率源选项
google驱动	上传Google驱动器账号文件添加Google驱动源选项

源显示顺序与添加到源的顺序相同源码参数化

图片搜索源

上头图像搜索选项允许用户使用Google从 web选择图像自定义搜索账户后上传到云形搜索可任选限制特定网站(例如自己的网站)并可用指定的许可标准过滤

赋能图像搜索选项上传部件使用法添加下列参数

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含图像搜索选项 。
• googleapiKeystring-google自定义搜索帐户API密钥
• 搜索BySite数列字符串-可选性域名网站允许搜索如果多网站指定网站搜索下拉程序将添加,以便用户选择网站搜索允许搜索全网使用值全部.默认值 :全部
• 搜索ByRights可选性设为真实性添加下拉框,用户可选择许可滤镜应用图像搜索默认值 :虚伪.

基本示例

网站过滤器和权利过滤器实例

滴箱源码

上头滴箱选项允许用户登录自有Drobox账号,浏览文件夹和文件,并选择文件上传至Cloudinary选项要求上传部件嵌入安全网页HTTPS,因为用户登录drobox必须跨安全连接

实现用户上传选项时,必须获取dropbox应用键:

1. 新建adropbox应用控制台:点击myaps应用中选择投箱API并全滴箱选项名称应用并点击创建a按钮.
2. 下一页设置如下重定向URI工具箱应用程序 :https://widget.www.aaaalireno.com/v2.0/global/auth/index.html
3. 复制自生成App密钥dropbox应用:它将配置为值投箱AppKey上传部件中包括drobox为上传源时参数(见下文)。
4. dropbox应用初始开发状态测试可启动附加用户启用附加用户按钮,当应用准备直播时,你需要点击申请制作状态允许所有用户通过drobox应用上传
5. 更多创建drobox应用信息见文档记录并记录品牌指南.

赋能滴箱源码上传部件创建法添加下列参数

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含滴箱选项 。
• 投箱AppKey+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

例举 :

shutterstock源码

上头百叶窗选项允许用户登录自有shutterstock账号,浏览资产并选择上传者到云口shutterstock资产尚未购买者选择,可在此流程中购买

启动shutterstock源码时,在创建上传部件时使用的方法中添加以下参数:

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含百叶窗选项 。

例举 :

Getty图像源码

上头Getyimages模拟选项允许用户登录自己的Getty图像账户,浏览资产并选择上传到Cloudinary尚没有购买所选择资产者,可在此流程中购买资产

要启用Getty图像源码,在创建上传部件时使用的方法中添加以下参数:

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含Getyimages模拟选项 。

例举 :

stock源码

上头istock使用选项允许用户登录自己的iStock账号,浏览资产并选择上传到Cloudinary尚没有购买iStock资产

启动iStock源码时,在创建上传部件时使用的方法中添加以下参数:

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含istock使用选项 。

例举 :

卸载源

上头松开斜线选项允许用户浏览unspash资产并选择上传到云型账号的资产

启动unsplash源码时,在创建上传部件时使用的方法中添加下列参数:

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含松开斜线选项 。

例举 :

Google驱动源

上头google驱动选项允许用户登录自己的Google驱动账号,浏览文件并选择文件上传云性

启动Google驱动器源码时,在创建上传部件时使用的方法中添加以下参数:

• 源码字符串数组-可选性如果您添加此参数限制可用选项,请确定包含google驱动选项 。
• googleDriveClientId(String)-可选性客户码Google驱动程序访问用户Google驱动账号不提供则使用Cloudinary谷歌驱动程序

例举 :

API事件

上传部件方法包括回调函数执行事件处理回调签名如下:函数(error,结果)中位报错中或空号成功或报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错报错结果JSON对象详解触发事件

用户点头显示完成按钮时登录消息到控制台

全表可用事件见事件处理段上传部件API引用

批前验证

上传队列文件上传云前,若需运行验证程序,可设置预批量参数函数预运行函数代码判定上传应取消时,可以包括取消布林参数集真实性调回函数时

例举文件名为 Topsecret时取消上传

准备上传参数

上传队列文件上传前需要做任何准备prepareUploadParams参数函数预运行函数准备上传参数,例如为每个文件指定标签或元数据,或甚至为签名上载准备上载签名签名,例如:

标签建议

用户输入时添加标签建议添加标签文本字段(高级选项)提供函数,当文本修改字段时调用函数函数应调回函数列表标签建议显示添加获取标签参数函数调用并同时设置showAdvancedOptions参数切换真实性.

下示例显示小型自完全函数返回只匹配当前输入字段文本的建议

上传预置选择

可多为用户提供高级选项带选择上传预置从中选择函数提供预设列表函数应调回函数列表标签建议显示添加getUploadPresets参数函数调用并同时设置showAdvancedOptions参数切换真实性.

下示例显示上传预置选择函数返回3预设

观感定制

外观和感知上传部件可完全定制化可提供自定义性修改颜色、字体和其他元素

自定义样式使用样式学参数接受JSON结构定义默认元素覆盖样式再划分如下:

• 调色板定义各种元素的颜色为 RGB或RGBA三重或四重或三重RGB/RGBBA六重
• 字体学定义字体使用全部文本元素当前部件只支持Google字体fonts.googleapis.com)

下示例设置所有缺省值(指参考目的)-实践上你只需要包含想覆盖的元素

本地化

上传部件中所用文本可完全定制供不同语言使用每种语言翻译使用文本翻译参数接受JSON结构定义每种语言文本元素使用值上头语言类参数集从文本参数定义语言选项使用内默认)置为默认值时,只需包括想置为默认值的元素

全部默认值可见于 :https://upload-widget.www.aaaalireno.com/global/text.json.

例例, 只定制队列标题显示队列title_uploading_with_counter和裁剪标题显示:

加密

文件可加密并上传原生文件.这些文件无法在云内预览,下载后需要解密向上传部件添加此特征时添加加密并包括加密密钥和初始矢量密钥并四)

加密文件时部件使用浏览器AES-GCM文本编码器加密使用子类Crypto库.

例举 :

解密

文件由部件上传加密可用AES-GCM解密子类Crypto库.库提供文件上传时使用加密密钥解密和初始向量的方法密钥并四配置部件)

上头解密方法接受密钥,四并缓冲区基础64格式文件

例举使用解密fe5267753fa45b325和ivcd8a46d72e26a365dcaef

通知服务器侧码

执行部件并需要处理服务器侧码信息时 最优解决办法是包含通知URL中上传预置参数元件并分析从部件上传得到响应

下Python实例中部件响应用于存储图像模型

上传部件引用

所有可用方法、参数和事件细节见上传部件引用.

可访问导航

上传部件使键盘无障碍化,面向仅使用键盘(无法使用鼠标)或视障并使用键盘和屏幕阅读器的用户上传部件终端用户可按无障碍标准使用键盘动作

• 标签标签并移位+Tab向前向向向向源标签间转输入选择。
• 上文件源标签
• 标签标签to选择文件按钮输入选择。
• 键盘搜索和导航对话框打开选择文件
• 预览屏幕标签标签上传、重置、回溯关闭输入选择键盘裁剪当前不支持