JavaScript SDK

<p class="shortdesc"></p> <section class="section" id="JavaScript_SDK__section_p4z_s5m_qlb"><h2 class="doc-tairway">1. 简介</h2> <p class="p">JavaScript SDK 适用于 IE9+、Chrome、Firefox、Safari 等浏览器,基于平安云OBS- API 构建。开发者使用本JS-SDK 可以方便的从浏览器端上传文件至平安云OBS,并对上传成功后的图片进行下载,删除,数据处理操作。</p> <p class="p">本 SDK 为客户端 JavaSript SDK,没有包含 token(用户操作凭证) 生成实现,为了安全,建议您通过网络从用户的签名服务端获取token,具体生成代码请参考后面签名服务模板。</p> <p class="p">如果您还没有开通或者还不了解平安云 OBS 服务,请登录<a class="xref" href="/ssr/products/OBS" target="_blank">OBS产品主页 </a>进行了解。</p> <ul class="ul" id="JavaScript_SDK__ul_fxj_3p4_qlb"> <li class="li"><strong class="ph b">上传</strong><ul class="ul" id="JavaScript_SDK__ul_qch_kp4_qlb"> <li class="li"> <p class="p">html5、Flash、html4 模式直接上传和分片上传</p> </li> <li class="li"> <p class="p">继承了 Plupload 的功能,可筛选文件上传、拖曳上传等</p> </li> </ul></li> <li class="li"><strong class="ph b">下载</strong><p class="p">用户通过JS SDK生成文件下载的 URL,用户访问该 URL 进行有效时间内下载。</p></li> </ul> </section> <section class="section" id="JavaScript_SDK__section_dwc_t5m_qlb"><h2 class="doc-tairway">2. SDK下载</h2> <p class="p">JavaScript SDK 开发包最新版本<a class="xref" href="https://pacloud.obs-cn-shanghai.pinganyun.com/sdk%2Fobs-javascript-sdk-1.3.1.zip?response-content-disposition=attachment%3Bfilename%3Dobs-javascript-sdk-1.3.1.zip" target="_blank">v1.3.1</a></p> </section> <section class="section" id="JavaScript_SDK__section_lvd_t5m_qlb"><h2 class="doc-tairway">3. API概览</h2> <table class="table" id="JavaScript_SDK__table_wv1_np4_qlb"><caption></caption><colgroup><col style="width:42.91845493562232%"><col style="width:57.08154506437768%"></colgroup><thead class="thead"> <tr class="row"> <th class="entry" id="JavaScript_SDK__table_wv1_np4_qlb__entry__1">API</th> <th class="entry" id="JavaScript_SDK__table_wv1_np4_qlb__entry__2">描述</th> </tr> </thead><tbody class="tbody"> <tr class="row"> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__1 "> <p class="p">签名服务准备</p> </td> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__2 "> <p class="p">本 SDK 依赖服务端颁发的上传凭证,可以通过网络从用户的服务端获取。</p> </td> </tr> <tr class="row"> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__1 "> <p class="p">初始化</p> </td> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__2 "> <p class="p">要接入平安云 OBS 存储,您需要拥有一对有效的 Access Key 和 Secret Key 进行签名认证。可以通过如下步骤获得:</p> <p class="p">开通 OBS 账号,登录 OBS 平台,查看 Access Key 和 Secret Key。</p> </td> </tr> <tr class="row"> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__1 "> <p class="p">上传</p> </td> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__2 "> <p class="p">上传文件</p> </td> </tr> <tr class="row"> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__1 "> <p class="p">下载</p> </td> <td class="entry" headers="JavaScript_SDK__table_wv1_np4_qlb__entry__2 "> <p class="p">下载文件</p> </td> </tr> </tbody></table> </section> <section class="section" id="JavaScript_SDK__section_jh2_t5m_qlb"><h2 class="doc-tairway">4. API描述</h2> <p class="p"><strong class="ph b">(1) 签名服务准备</strong></p> <p class="p"><strong class="ph b">接口描述</strong></p> <p class="p">本 SDK 依赖服务端颁发的上传凭证,可以通过网络从用户的服务端获取。</p> <p class="p">用户服务端可以通过下面两种方式去生成签名:</p> <ul class="ul" id="JavaScript_SDK__ul_xv1_np4_qlb"> <li class="li">用户按照签名规则自行生成,详细的签名规则见 <a class="xref" href="#JavaScript_SDK__aaa">附录OBS签名文档</a>。</li> <li class="li">调用 OBS JAVA SDK 中 getSign 接口去生成签名,请参考下面的代码示例去返回 JSON 数据。</li> </ul> <p class="p">后端服务应提供一个 URL 地址,供 SDK 获取签名使用,前端通过 Ajax 请求该地址后获得签名。Ajax 请求成功后,服务端应返回如下格式的 json。</p> <p class="p"><strong class="ph b">示例</strong></p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">{ <em class="hl-comment" style="color:#006400">// 根据算签规则计算出的签名</em> <span class="hl-string" style="color:#2a00ff">"signature"</span>:<span class="hl-string" style="color:#2a00ff">"TjEc68iSYpmw1qRiyIrJMnOF1M="</span>, <em class="hl-comment" style="color:#006400">// 用户公钥</em> <span class="hl-string" style="color:#2a00ff">"AWSAccessKeyId"</span>:<span class="hl-string" style="color:#2a00ff">"TjEc68iSYpmw1qRiyIrJMnOF1M="</span>, <em class="hl-comment" style="color:#006400">// 当前标准格式GMT时间</em> <span class="hl-string" style="color:#2a00ff">"date"</span>:<span class="hl-string" style="color:#2a00ff">"Mon, 28 Aug 2017 02:51:10 GMT"</span>, <em class="hl-comment" style="color:#006400">// 仅为下载URL时使用,当前时间的time值+过期的秒数,具体见附录OBS签名文档。</em> <span class="hl-string" style="color:#2a00ff">"expires"</span>:<span class="hl-string" style="color:#2a00ff">"1503889172"</span> }</pre> <p class="p">如果用户调用 OBS JAVA SDK 中 getSign 接口去生成签名,可以参考如下代码模板。</p> <p class="p">示例签名服务器 URL:http://xxx:8080/getSign</p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java"><em><span class="hl-annotation" style="color: gray">@RequestMapping(value = "/getSign")</span></em> <strong class="hl-keyword" style="color:#7f0055">public</strong> String getSign( <em><span class="hl-annotation" style="color: gray">@RequestParam(value = "path")</span></em> String path, <em><span class="hl-annotation" style="color: gray">@RequestParam(value = "method")</span></em> String method, <em><span class="hl-annotation" style="color: gray">@RequestParam(value = "contentType", required = false)</span></em> String contentType, <em><span class="hl-annotation" style="color: gray">@RequestParam(value = "date", required = false)</span></em> String date, <em><span class="hl-annotation" style="color: gray">@RequestParam(value = "expires", required = false)</span></em> String expires, <em><span class="hl-annotation" style="color: gray">@RequestParam(value = "contentDisposition", required = false)</span></em> String contentDisposition ) <strong class="hl-keyword" style="color:#7f0055">throws</strong> Exception { RadosgwService service = RadosgwServiceFactory.getFromConfigObject(<strong class="hl-keyword" style="color:#7f0055">new</strong> ObsClientConfig() { <strong class="hl-keyword" style="color:#7f0055">public</strong> String getUserAgent() { <strong class="hl-keyword" style="color:#7f0055">return</strong> <span class="hl-string" style="color:#2a00ff">""</span>; } <strong class="hl-keyword" style="color:#7f0055">public</strong> String getObsUrl() { <strong class="hl-keyword" style="color:#7f0055">return</strong> obsUrl; } <strong class="hl-keyword" style="color:#7f0055">public</strong> String getObsAccessKey() { <strong class="hl-keyword" style="color:#7f0055">return</strong> <span class="hl-string" style="color:#2a00ff">"<***user Access Key ***>"</span>; } <strong class="hl-keyword" style="color:#7f0055">public</strong> String getObsSecret() { <strong class="hl-keyword" style="color:#7f0055">return</strong> <span class="hl-string" style="color:#2a00ff">"<***user Secret Key ***>"</span>; } }); AuthSignData signData = <strong class="hl-keyword" style="color:#7f0055">new</strong> AuthSignData(); signData.setRequestPath(path); signData.setRequestMethod(method); signData.setContentType(contentType); <strong class="hl-keyword" style="color:#7f0055">if</strong> (expires == null || expires.equals(<span class="hl-string" style="color:#2a00ff">""</span>)) { signData.getSignData().put(<span class="hl-string" style="color:#2a00ff">"Date"</span>, date); } <strong class="hl-keyword" style="color:#7f0055">else</strong> { signData.getSignData().put(<span class="hl-string" style="color:#2a00ff">"Date"</span>, expires); signData.setResponseContentDisposition(contentDisposition); } String signature = service.getSign(signData); JSONObject json = <strong class="hl-keyword" style="color:#7f0055">new</strong> JSONObject(); json.put(<span class="hl-string" style="color:#2a00ff">"AWSAccessKeyId"</span>, <span class="hl-string" style="color:#2a00ff">"<***user Access Key ***>"</span>); json.put(<span class="hl-string" style="color:#2a00ff">"signature"</span>, signature); json.put(<span class="hl-string" style="color:#2a00ff">"date"</span>, date); json.put(<span class="hl-string" style="color:#2a00ff">"expires"</span>, expires); <strong class="hl-keyword" style="color:#7f0055">return</strong> json.toString(); }</pre> <p class="p">入参信息说明,请参见附录<a class="xref" href="#JavaScript_SDK__aaa">签名规则</a>。</p> <p class="p">对使用该 SDK 的开发者而言,请参考后面具体的操作请求去进行相应的入参信息配置。</p> <p class="p"><strong class="ph b">(2) 初始化</strong></p> <p class="p"><strong class="ph b">接口描述</strong></p> <p class="p">要接入平安云 OBS 存储,您需要拥有一对有效的 Access Key 和 Secret Key 进行签名认证。可以通过如下步骤获得:</p> <p class="p">1)开通 OBS 账号</p> <p class="p">2)登录 OBS 平台,查看 Access Key 和 Secret Key</p> <p class="p">3)在页面中引入<code class="ph codeph">fincloud-pingan-obs-javascript-sdk-1.3.0.js</code>。</p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java"><script src=<span class="hl-string" style="color:#2a00ff">"fincloud-pingan-obs-javascript-sdk-1.3.0.js"</span>></script></pre> <p class="p">4)配置用户自己的签名服务器路径, 目的:用户通过唯一的Access Key 和 Secret Key,根据签名规则,计算出用户端的签名,如果该签名和OBS服务端签名一致,那么验证通过,用户将能操作文件进行上传/下载。</p> <p class="p"><strong class="ph b">(3) 上传</strong></p> <p class="p"><strong class="ph b">接口描述</strong></p> <ul class="ul" id="JavaScript_SDK__ul_bw1_np4_qlb"> <li class="li">要接入平安云 OBS在页面中引入 plupload.dev.js 和 moxie.js,可以从最新版本的压缩包中获取。</li> <li class="li">在页面中引入fincloud-pingan-obs-javascript-sdk-1.3.0.js</li> <li class="li">初始化 uploader (请确保在执行初始化时,页面已经引入 plupload):</li> <li class="li">分片上传默认支持一片5M,支持10000片上传。用户可以根据自己的业务需要,设置分片的大小,但一片最小必须是5M,建议最大不要超过30M。</li> </ul> <p class="p"><strong class="ph b">示例</strong></p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">var uploader = <strong class="hl-keyword" style="color:#7f0055">new</strong> PaObs.uploader({ runtimes : <span class="hl-string" style="color:#2a00ff">'html5,flash,html4'</span>, <em class="hl-comment" style="color:#006400">//上传模式,依次退化</em> browse_button : <span class="hl-string" style="color:#2a00ff">'selectfiles'</span>, <em class="hl-comment" style="color:#006400">//上传选择的点选按钮,必需</em> container: <span class="hl-string" style="color:#2a00ff">'container'</span>, <em class="hl-comment" style="color:#006400">//上传区域DOM ID,默认是browser_button的父元素</em> endpoint: <span class="hl-string" style="color:#2a00ff">'obs-cn-shanghai.yun.pingan.com'</span>, <em class="hl-comment" style="color:#006400">//上传地址PingAn-OBS-endpoint,从平安云OBS控制台获取.</em> bucket:<span class="hl-string" style="color:#2a00ff">'user-bucket'</span>, <em class="hl-comment" style="color:#006400">//上传的bucket.</em> <em class="hl-comment" style="color:#006400">//key:'objectKey', //对象存储的key,如果key为null,将用文件名作为key.</em> <em class="hl-comment" style="color:#006400">//unique_names: true, //是否生成唯一的id作为对象的key.默认false,key为文件名。若开启该选项,JS-SDK会为每个文件自动生成key</em> filters: [{title: <span class="hl-string" style="color:#2a00ff">"Image files"</span>, extensions: <span class="hl-string" style="color:#2a00ff">"jpg,gif,png"</span>}, {title: <span class="hl-string" style="color:#2a00ff">'Zip files'</span>, extensions: <span class="hl-string" style="color:#2a00ff">'zip,7z,rar'</span>}, {title: <span class="hl-string" style="color:#2a00ff">'txt files'</span>, extensions: <span class="hl-string" style="color:#2a00ff">'txt'</span>} ], <em class="hl-comment" style="color:#006400">//文件限制</em> resize: { width: <span class="hl-number">500</span>, height: <span class="hl-number">500</span>, crop: true, quality: <span class="hl-number">60</span>, preserve_headers: false }, <em class="hl-comment" style="color:#006400">//重置图片参数</em> uptoken_url:<span class="hl-string" style="color:#2a00ff">''</span>, <em class="hl-comment" style="color:#006400">//签名路径,如果配置该URL,返回值将严格按照obs附件文档要求(用户服务端生成Token文档).</em> uptoken_func: function (bucket, path, method, contentType, date, contentDisposition) { <em class="hl-comment" style="color:#006400">//如果同时设置了uptoken_url和uptoken_func,其优先级为uptoken_url > uptoken_func</em> var requestTokenURL = <span class="hl-string" style="color:#2a00ff">'http://<***user token server***>/getSign'</span> + <span class="hl-string" style="color:#2a00ff">'?bucket='</span> + encodeURIComponent(bucket) + <span class="hl-string" style="color:#2a00ff">'&path='</span> + encodeURIComponent(path) + <span class="hl-string" style="color:#2a00ff">'&method='</span> + encodeURIComponent(method) + <span class="hl-string" style="color:#2a00ff">'&contentType='</span> + encodeURIComponent(contentType) + <span class="hl-string" style="color:#2a00ff">'&date='</span> + encodeURIComponent(date) + <span class="hl-string" style="color:#2a00ff">'&contentDisposition='</span> + encodeURIComponent(contentDisposition); var ajax = {}; <strong class="hl-keyword" style="color:#7f0055">if</strong> (window.XMLHttpRequest) { ajax = <strong class="hl-keyword" style="color:#7f0055">new</strong> XMLHttpRequest(); } <strong class="hl-keyword" style="color:#7f0055">else</strong> { ajax = <strong class="hl-keyword" style="color:#7f0055">new</strong> ActiveXObject(<span class="hl-string" style="color:#2a00ff">"Microsoft.XMLHTTP"</span>); } ajax.open(<span class="hl-string" style="color:#2a00ff">'GET'</span>, requestTokenURL, false); ajax.send(); <strong class="hl-keyword" style="color:#7f0055">if</strong> (ajax.status == <span class="hl-number">200</span>) { var res = JSON.parse(ajax.responseText); <strong class="hl-keyword" style="color:#7f0055">return</strong> res; } <strong class="hl-keyword" style="color:#7f0055">else</strong> { logger.error(<span class="hl-string" style="color:#2a00ff">"***get uptoken failed from: "</span>, requestTokenURL); uploader.trigger(<span class="hl-string" style="color:#2a00ff">'Error'</span>, { status: <span class="hl-number">204</span>, response: <span class="hl-string" style="color:#2a00ff">"getUpToken failed"</span>, file: file, code: plupload.HTTP_ERROR }); <strong class="hl-keyword" style="color:#7f0055">return</strong> <span class="hl-string" style="color:#2a00ff">''</span>; } }, <em class="hl-comment" style="color:#006400">//如果签名路径为空,用户可以自定义自己的签名获取方式,但返回值严格按照obs的json格式.</em> init: { PostInit: function () { document.getElementById(<span class="hl-string" style="color:#2a00ff">'obsfile'</span>).innerHTML = <span class="hl-string" style="color:#2a00ff">''</span>; document.getElementById(<span class="hl-string" style="color:#2a00ff">'postfiles'</span>).onclick = function () { uploader.start(); <strong class="hl-keyword" style="color:#7f0055">return</strong> false; }; }, FilesAdded: function (up, files) {}, BeforeUpload: function(up, file) {}, UploadProgress: function (up, file) {}, FileUploaded: function (up, file, info) {}, Error: function (up, err) {}, UploadComplete: function() {}, } }); uploader.init(); </pre> <p class="p">如果一个页面中有多个上传实例,可以按如下操作:</p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">var option1 = { key : val , …… }; var uploader = PaObs.uploader(option1); var PaObs2 = <strong class="hl-keyword" style="color:#7f0055">new</strong> PaObsJsSDK(); var option2 = { key : val , …… }; var uploader2 = PaObs2.uploader(option2); </pre> <p class="p"><strong class="ph b">(4) 下载</strong></p> <p class="p"><strong class="ph b">接口描述</strong></p> <ul class="ul" id="JavaScript_SDK__ul_fw1_np4_qlb"> <li class="li">在页面中引入<code class="ph codeph">fincloud-pingan-obs-javascript-sdk-1.3.0.js</code></li> <li class="li">支持公私有url下载。</li> <li class="li">支持参数选择缩略图下载,需要在公私有url上添加format值。</li> </ul> <p class="p"><strong class="ph b">示例</strong></p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java"><em class="hl-comment" style="color:#006400">// 公有url生成</em> var url = PaObs.getUrl ({ domain: <span class="hl-string" style="color:#2a00ff">'bucketXXX.obs-cn-shanghai.yun.pingan.com'</span>, <em class="hl-comment" style="color:#006400">//下载文件时所用的加速域名,或者OBS访问域名(访问域名从用户OBS控制台获取)</em> bucket: <span class="hl-string" style="color:#2a00ff">'bucketXXX'</span>, <em class="hl-comment" style="color:#006400">//下载文件的bucket</em> key: <span class="hl-string" style="color:#2a00ff">'objectKey'</span>, <em class="hl-comment" style="color:#006400">//下载文件的对象key</em> format: <span class="hl-string" style="color:#2a00ff">'imageView/0/w/500/h/500'</span> <em class="hl-comment" style="color:#006400">//配置该参数去进行缩略图下载.</em> }); <em class="hl-comment" style="color:#006400">// 私有url生成</em> var url = PaObs.getUrlWithToken({ domain: <span class="hl-string" style="color:#2a00ff">'bucketXXX.obs-cn-shanghai.yun.pingan.com'</span>, <em class="hl-comment" style="color:#006400">//下载文件时所用的加速域名,或者OBS访问域名(访问域名从用户OBS控制台获取)</em> bucket: <span class="hl-string" style="color:#2a00ff">'bucketXXX'</span>, <em class="hl-comment" style="color:#006400">//下载文件的bucket</em> key: <span class="hl-string" style="color:#2a00ff">'objectKey'</span>, <em class="hl-comment" style="color:#006400">//下载文件的对象key</em> downtoken_url: <span class="hl-string" style="color:#2a00ff">'http://TokenServer/getSign'</span>, <em class="hl-comment" style="color:#006400">//下载文件的token获取路径.</em> <em class="hl-comment" style="color:#006400">//downtoken_func:'' //如果用户自定义获取token方法,请配置该参数,并将downtoken_url设置为null</em> expireSeconds: <span class="hl-number">120</span>, <em class="hl-comment" style="color:#006400">//配置下载链接过期时间,以秒为单位.</em> format: <span class="hl-string" style="color:#2a00ff">'imageView/0/w/500/h/500'</span> <em class="hl-comment" style="color:#006400">//配置该参数去进行缩略图下载.</em> });</pre> <p class="p">关于format :'imageView/{mode}/w/{weight}/h/{height}/format/{imageFormat}'说明:</p> <p class="p">imageView是OBS API图片处理关键字。格式转换,获取适配图片,支持格式 jpeg,tiff, gif, bmp, png ,其中 gif 格式只会保留第一帧图片,此方法将占用一个 Http 连接,在 Content 读取完毕或显示关闭时释放连接。</p> <p class="p">mode:缩放方式,有效值 0~5:</p> <ul class="ul" id="JavaScript_SDK__ul_hw1_np4_qlb"> <li class="li">0:限定缩略图的长边最多为 ,短边最多为 ,进行等比缩放,不裁剪。如果只指定 w 参数则表示限定长边(短边自适应),只指定 h 参数则表示限定短边(长边自适应)。</li> <li class="li">1:限定缩略图的宽最少为 ,高最少为 ,进行等比缩放,居中裁剪。转后的缩略图通常恰好是 x 的大小(有一个边缩放的时候会因为超出矩形框而被裁剪掉多余部分)。如果只指定 w 参数或只指定 h 参数,代表限定为长宽相等的正方图。</li> <li class="li">2:限定缩略图的宽最多为 ,高最多为 ,进行等比缩放,不裁剪。如果只指定 w 参数则表示限定宽(长自适应),只指定 h 参数则表示限定长(宽自适应)。它和模式0类似,区别只是限定宽和高,不是限定长边和短边。从应用场景来说,模式0适合移动设备上做缩略图,模式2适合PC上做缩略图。</li> <li class="li">3:限定缩略图的宽最少为 ,高最少为 ,进行等比缩放,不裁剪。如果只指定 w 参数或只指定 h 参数,代表长宽限定为同样的值。你可以理解为模式1是模式3的结果再做居中裁剪得到的。</li> <li class="li">4:限定缩略图的长边最少为 ,短边最少为 ,进行等比缩放,不裁剪。如果只指定 w 参数或只指定 h 参数,表示长边短边限定为同样的值。这个模式很适合在手持设备做图片的全屏查看(把这里的长边短边分别设为手机屏幕的分辨率即可),生成的图片尺寸刚好充满整个屏幕(某一个边可能会超出屏幕)。</li> <li class="li">5:限定缩略图的长边最少为 ,短边最少为 ,进行等比缩放,居中裁剪。如果只指定 w 参数或只指定 h 参数,表示长边短边限定为同样的值。同上模式4,但超出限定的矩形部分会被裁剪。 `width:` 图片宽度,非负数,有效值(0-6000)<ul class="ul" id="JavaScript_SDK__ul_wq2_tr4_qlb"> <li class="li"> w代表width宽度,图片宽度,非负数,有效值(0-6000)</li> <li class="li"> h代表height高度,图片高度,非负数,有效值(0-6000)</li> <li class="li"> imageFormat:图片格式(非必传),支持jpeg, tiff, gif, bmp, png</li> </ul></li> </ul> <p class="p"><strong class="ph b">5. 常见问题</strong></p> <p class="p">因为本JS-SDK主要基于 plupload,用户可以通过参阅 plupload 文档资料,可以对OBS的 demo 进行修改,以满足自己的业务需求,plupload 插件的使用文档请参阅plupload官方文档。</p> <p class="p"><strong class="ph b">(1) 关于上传文件命名问题</strong></p> <p class="p">在 upload.js 里面,unique_names 是 plupload 插件下面的一个参数,当值为 true 时会为每个上传的文件生成一个唯一的文件名,这个是 plupload 插件自动生成的,如果设置成 false,OBS会以上传的原始名进行命名。</p> <p class="p"><strong class="ph b">(2) 使用plupload的resize设置压缩上传,可以使用该参数对将要上传的图片进行压缩,该参数是一个对象,里面包括5个属性:</strong></p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">resize: { width: <span class="hl-number">100</span>, height: <span class="hl-number">100</span>, crop: true, quality: <span class="hl-number">60</span>, preserve_headers: false }</pre> <ul class="ul" id="JavaScript_SDK__ul_jw1_np4_qlb"> <li class="li">width:指定压缩后图片的宽度,如果没有设置该属性则默认为原始图片的宽度</li> <li class="li">height:指定压缩后图片的高度,如果没有设置该属性则默认为原始图片的高度</li> <li class="li">crop:是否裁剪图片</li> <li class="li">quality:压缩后图片的质量,只对jpg格式的图片有效,默认为90。quality可以跟width和height一起使用,但也可以单独使用,单独使用时,压缩后图片的宽高不会变化,但由于质量降低了,所以体积也会变小</li> <li class="li">preserve_headers:压缩后是否保留图片的元数据,true为保留,false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点。</li> </ul> <p class="p"><strong class="ph b">(3) 限制上传文件的类型</strong></p> <p class="p">通过 plupload 中设定 filter 参数直接在 JS 前端限定,如下:</p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">filters: { mime_types : [ <em class="hl-comment" style="color:#006400">//只允许上传图片和zip文件</em> { title : <span class="hl-string" style="color:#2a00ff">"Image files"</span>, extensions : <span class="hl-string" style="color:#2a00ff">"jpg,gif,png"</span> }, { title : <span class="hl-string" style="color:#2a00ff">"Zip files"</span>, extensions : <span class="hl-string" style="color:#2a00ff">"zip"</span> } ], max_file_size : <span class="hl-string" style="color:#2a00ff">'400kb'</span>, <em class="hl-comment" style="color:#006400">//最大只能上传400kb的文件</em> prevent_duplicates : true <em class="hl-comment" style="color:#006400">//不允许选取重复文件.&nbsp;&nbsp;&nbsp;&nbsp;</em> }</pre> <p class="p">可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入,它包括三个属性:</p> <ul class="ul" id="JavaScript_SDK__ul_lw1_np4_qlb"> <li class="li"><strong class="ph b">mime_types:</strong>用来限定上传文件的类型,为一个数组,该数组的每个元素又是一个对象,该对象有title和extensions两个属性,title为该过滤器的名称,extensions为文件扩展名,有多个时用逗号隔开。该属性默认为一个空数组,即不做限制。</li> <li class="li"><strong class="ph b">max_file_size:</strong>用来限定上传文件的大小,如果文件体积超过了该值,则不能被选取。值可以为一个数字,单位为b,也可以是一个字符串,由数字和单位组成,如’200kb’</li> <li class="li"><strong class="ph b">prevent_duplicates:</strong>是否允许选取重复的文件,为true时表示不允许,为false时表示允许,默认为false。如果两个文件的文件名和大小都相同,则会被认为是重复的文件</li> </ul> <p class="p"><strong class="ph b">(4) 设置每次只能选择一个文件</strong></p> <p class="p">通过 plupload 插件中的 multi_selection 参数控制,如下:</p> <pre class="pre codeblock"><code>multi_selection: false</code></pre> <p class="p"><strong class="ph b">(5) 设置取消上传,暂停上传</strong></p> <p class="p">在 index.html 中加入两个控制按钮:</p> <pre class="pre codeblock"><code>uploader.stop();</code></pre> <p class="p"><strong class="ph b">(6) 分片上传</strong></p> <p class="p">目前JS SDK支持直传和分片上传。</p> <p class="p"> 当设置上传参数chunk_size:'0'的时候,上传方式为直传.</p> <p class="p"> 当未设置上传参数chunk_size的时候,上传文件大于5M,默认分片上传,每片为5M.</p> <p class="p"><strong class="ph b">(7) 关于请求 token 出现跨域</strong></p> <p class="p">因为都是建议用户从后端 SDK 获取 token,然后在 upload.js 里设置参数 uptoken_url:'获取uptoken的url',这里就有可能出现跨域的现象,此时在服务端添加 response.setHeader("Access-Control-Allow-Origin","*"); 相应头字段即可。</p> <p class="p"><strong class="ph b">(8) 关于多个按钮选择文件的 Demo</strong></p> <p class="p">很多用户都在问 JSSDK 多文件选择的 Demo,其实只需要在 upload.js 文件里多 new 几个 Uploader 对象,然后在主页上写好对应的上传按钮就可以了。upload.js 里面多 new 几个 uploader 对象。</p> <p class="p"><span class="ph" id="JavaScript_SDK__aaa"><strong class="ph b">6. 附录:签名规则</strong></span></p> <p class="p">签名是系统根据签名规则生成出来的字符串,用于判断客户端和服务端生成的签名是否一致,以此来判断用户是否有权限在OBS进行操作。</p> <p class="p">用户签名分为:</p> <ul class="ul" id="JavaScript_SDK__ul_dmn_1s4_qlb"> <li class="li"> <p class="p">Header签名: 用户可以在HTTP请求中增加 Authorization 的 Header 来包含签名(Signature)信息,表明这个消息已被授权。</p> </li> <li class="li"> <p class="p">URL签名:除了使用 Authorization Head,用户还可以在URL中加入签名信息,这样用户就可以把该URL转给第三方实现授权访问, 并且可以设置过期时间等。</p> </li> </ul> <p class="p">Header 签名</p> <p class="p">用户可以在HTTP请求中增加 Authorization 的 Header 来包含签名(Signature)信息,表明这个消息已被授权。</p> <p class="p">Authorization 字段计算的方法:</p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">Authorization = <span class="hl-string" style="color:#2a00ff">"AWS "</span> + AccessKeyId + <span class="hl-string" style="color:#2a00ff">":"</span> + Signature Signature = base64(hmacSha1(AccessKeySecret, VERB + <span class="hl-string" style="color:#2a00ff">"\n"</span> + Content_MD5 + <span class="hl-string" style="color:#2a00ff">"\n"</span> + Content_Type + <span class="hl-string" style="color:#2a00ff">"\n"</span> + Date + <span class="hl-string" style="color:#2a00ff">"\n"</span> + CanonicalizedResource))</pre> <ul class="ul" id="JavaScript_SDK__ul_qw1_np4_qlb"> <li class="li">AccessKeySecret 表示签名所需的密钥</li> <li class="li">VERB 表示HTTP 请求的 Method,主要有 PUT,GET,POST,HEAD,DELETE 等</li> <li class="li">\n 表示换行符</li> <li class="li">Content_MD5 表示请求内容数据的MD5值,对消息内容(不包括头部)计算MD5值获得128比特位数字,对该数字进行base64编码而得到。该请求头可用于消息合法性的检查(消息内容是否与发送时一致),如”eB5eJF1ptWaXm4bijSPyxw==”,也可以为空。为了避免影响性能,JS-SDK目前Content-MD5为null。</li> <li class="li">Content_Type 表示请求内容的类型,如” application/x-www-form-urlencoded”,如果是POST请求,该值为“multipart/form-data”</li> <li class="li">Date 表示此次操作的时间,且必须为GMT格式,如”Sun, 22 Nov 2015 08:16:38 GMT”</li> <li class="li">CanonicalizedResource 表示用户想要访问的 OBS 资源</li> </ul> <p class="p">其中,Date 和 CanonicalizedResource 不能为空;如果请求中的 Dat e时间和 OBS 服务器的时间差 15 分钟以上,OBS 服务器将拒绝该服务,并返回 HTTP 403 错误。</p> <p class="p">URL签名</p> <p class="p">除了使用 Authorization Head,用户还可以在URL中加入签名信息,这样用户就可以把该URL转给第三方实现授权访问,并且设置过期时间等。</p> <p class="p">URL签名示例:</p> <pre class="pre codeblock"><code>http://obs.pingan.com.cn/xiaoming-bucket-0009/aaa?AWSAccessKeyId=sk-xiaoming009&Expires=1503903538&Signature=s5rmkBZ1DvkQRplG5GJ7HGd%2Fzik%3D&response-content-disposition=test.jpg</code></pre> <p class="p">URL签名,必须至少包含Signature,Expires,AWSAccessKeyId三个参数</p> <ul class="ul" id="JavaScript_SDK__ul_sw1_np4_qlb"> <li class="li">Expires 这个参数的值是一个UNIX时间(自UTC时间1970年1月1号开始的秒数,详见wiki),用于标识该URL的超时时间。如果OBS接收到这个URL请求的时候晚于签名中包含的Expires参数时,则返回请求超时的错误码。例如:当前时间是1141889060,开发者希望创建一个60秒后自动失效的URL,则可以设置Expires时间为1141889120。</li> <li class="li">AWSAccessKeyId即密钥中的AccessKeyId。</li> <li class="li">Signature 表示签名信息。所有的OBS支持的请求和各种Header参数,在URL中进行签名的算法和在Header中包含签名的算法基本一样。</li> </ul> <p class="p">Authorization 字段计算的方法</p> <pre xmlns:version="java:net.sf.saxon.Version" class="pre codeblock language-java">Signature = urlencode(base64(hmacSha1(AccessKeySecret, VERB + <span class="hl-string" style="color:#2a00ff">"\n"</span> + CONTENT_MD5 + <span class="hl-string" style="color:#2a00ff">"\n"</span> + CONTENT_TYPE + <span class="hl-string" style="color:#2a00ff">"\n"</span> + EXPIRES + <span class="hl-string" style="color:#2a00ff">"\n"</span> + CanonicalizedResource)))</pre> <p class="p">其中,与header中包含签名相比主要区别如下:</p> <ul class="ul" id="JavaScript_SDK__ul_uw1_np4_qlb"> <li class="li">通过URL包含签名时,之前的Date参数换成Expires参数。</li> <li class="li">不支持同时在URL和Head中包含签名。</li> <li class="li">如果传入的Signature,Expires,AWSAccessKeyId出现不止一次,以第一次为准。</li> <li class="li">请求先验证请求时间是否晚于Expires时间,然后再验证签名。</li> <li class="li">将签名字符串放到url时,注意要对url进行urlencode</li> </ul> <p class="p">具体的计算签名的开源代码,请参考 OBS JAVA SDK 的 getSign 接口。</p> </section>
以上内容是否解决了您的问题?
请补全提交信息!
咨询·建议

电话咨询

400-151-8800

邮件咨询

cloud@pingan.com

在线客服

工单支持

解决云产品相关技术问题