脚本宝典收集整理的这篇文章主要介绍了

更好用的七牛云存储 JS SDK,因为官方的太难用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0"><a href="https://github.com/lsxiao/qiniu4js" rel="nofollow noreferrer" target="_blank">qiniu4js</a></h1> <p>q<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>iu4js目前可能是七牛JavaScript浏览器文件上传的最好实现。</p> <p>使用TypeScript编写,不依赖任何三方库,纯代码不包含任何界面元素,使用<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5 文件<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>上传(目前和未来不会支持<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>4以及FLASH)。</p> <p>支持UMD模块导入。</p> <h2 id="articleHeader1">已完成</h2> <ul> <li> <p>[x] 文件直传</p> </li> <li> <p>[x] 分块上传</p> </li> <li> <p>[x] 多文件上传</p> </li> <li> <p>[x] token共享</p> </li> <li> <p>[x] 自动重传</p> </li> <li> <p>[x] 任务拦截器</p> </li> <li> <p>[x] 文件过滤</p> </li> <li> <p>[x] 多实例(可以创建多个上传实例,互不影响)</p> </li> </ul> <h2 id="articleHeader2">待完成</h2> <ul> <li> <p>[ ] 自定义变量</p> </li> <li> <p>[ ] 图片裁剪</p> </li> <li> <p>[ ] 图片质量压缩</p> </li> <li> <p>[ ] 使用七牛<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>进行图片处理</p> </li> </ul> <h2 id="articleHeader3">安装</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="sudo npm install qiniu4js --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">su<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a> npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> qiniu4js --save</code></pre> <h2 id="articleHeader4">导入</h2> <h3 id="articleHeader5">浏览器</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>=" <script src=&quot;qiniu4js.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"qiniu4js.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader6"><a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a></h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" import {UploaderBuilder} from 'Qiniu'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"> <span class="hljs-keyword">import</span> {UploaderBuilder} <span class="hljs-keyword">from</span> <span class="hljs-string">'Qiniu'</span></code></pre> <h3 id="articleHeader7">CommonJS</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" {UploaderBuilder} = require('Qiniu')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"> {UploaderBuilder} = <span class="hljs-built_in">require</span>(<span class="hljs-string">'Qiniu'</span>)</code></pre> <h2 id="articleHeader8">使用方法</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//构建uploader实例 let uploader = new Qiniu.UploaderBuilder() .debug(false)//开启debug,默认false .domain(&quot;http://img.yourdomain.com&quot;)//默认为http://upload.qiniu.com .retry(0)//设置重传次数,默认0,不重传 .size(1024*1024)//分片大小,最多为4MB,单位为字节,默认1MB .chunk(true)//是否分块上传,默认true,当chunk=true并且文件大于4MB才会进行分块上传 .auto(true)//选中文件后立即上传,默认true .multiple(true)//是否支持多文件选中,默认true .accept(['.gif','.png','video/*'])//过滤文件,默认无,详细配置见http://www.w3schools.com/tags/att_input_accept.asp .tokenShare(true)//在一次上传队列中,是否分享token,如果为false每上传一个文件都需要请求一次Token,默认true .tokenFunc(function (setToken,task) { //token获取函数,token获取完成后,必须调用`setToken(token);`不然上传任务不会执行。 setTimeout(function () { setToken(&quot;token&quot;); }, 1000); }) //任务拦截器 .interceptor({ //拦截任务,返回true,任务将会从任务队列中剔除,不会被上传 onIntercept: function (task) { return task.file.size > 1024 * 1024;<br /> },<br /> //中断任务,返回true,任务队列将会在这里中断,不会执行上传操作。<br /> onInterrupt: function (task) {<br /> if (this.onIntercept(task)) {<br /> alert(&quot;请上传小于1m的文件&quot;);<br /> return true;<br /> }<br /> else {<br /> return false;<br /> }<br /> },<br /> }<br /> //你可以添加多个任务拦截器<br /> .interceptor({...})<br /> .listener({<br /> onReady(tasks) {<br /> //选择上传文件确定后,该生命周期函数会被回调。</p> <p> },onStart(tasks){<br /> //开始上传</p> <p> },onTaskGetKey(task){<br /> //为每一个上传的文件指定key,如果不指定则由七牛服务器自行处理<br /> return &quot;test.png&quot;;</p> <p> },onTaskProgress: function (task) {<br /> //每一个任务的上传进度,通过`task.progress`获取<br /> console.log(task.progress);</p> <p> },onTaskSuccess(task){<br /> //一个任务上传成功后回调</p> <p> },onTaskFail(task) {<br /> //一个任务在经历重传后依然失败后回调此函数</p> <p> },onTaskRetry(task) {<br /> //开始重传</p> <p> },onFinish(tasks){<br /> //所有任务结束后回调,注意,结束不等于都成功,该函数会在所有HTTP上传请求响应后回调(包括重传请求)。</p> <p> }}<br /> }).build();</p> <p>//如果auto设置为false,则需要手动启动上传。<br /> //uploader.start();</p> <p>//由于安全原因,display:none的file input,无法通过代码调用click方法,必须通过如下处理,让用户来实现click,从而打开文件选择窗口:</p> <p>//你可以自行监听HTML元素的click事件,在回调函数内部打开文件选择窗口。你也可以使用jQuery监听,下面使用的是原生的JavaScript的方式。<br /> button = document.getElementById('button');<br /> button.addEventListener(&quot;click&quot;, function () {<br /> uploader.chooseFile();<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//构建uploader实例</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> uploader = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> Qiniu.UploaderBuilder() .debug(<span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>)<span class="hljs-comment">//开启debug,默认false</span> .domain(<span class="hljs-string">"http://img.yourdomain.com"</span>)<span class="hljs-comment">//默认为http://upload.qiniu.com</span> .re<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>(<span class="hljs-number">0</span>)<span class="hljs-comment">//设置重传次数,默认0,不重传</span> .size(<span class="hljs-number">1024</span>*<span class="hljs-number">1024</span>)<span class="hljs-comment">//分片大小,最多为4MB,单位为字节,默认1MB</span> .chunk(<span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>)<span class="hljs-comment">//是否分块上传,默认true,当chunk=true并且文件大于4MB才会进行分块上传</span> .auto(<span class="hljs-literal">true</span>)<span class="hljs-comment">//选中文件后立即上传,默认true</span> .multiple(<span class="hljs-literal">true</span>)<span class="hljs-comment">//是否支持多文件选中,默认true</span> .accept([<span class="hljs-string">'.g<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>'</span>,<span class="hljs-string">'.png'</span>,<span class="hljs-string">'video/*'</span>])<span class="hljs-comment">//过滤文件,默认无,详细配置见http://www.w3schools.com/tags/att_input_accept.asp</span> .tokenShare(<span class="hljs-literal">true</span>)<span class="hljs-comment">//在一次上传队列中,是否分享token,如果为false每上传一个文件都需要请求一次Token,默认true</span> .tokenFunc(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params">setToken,task</span>) </span>{ <span class="hljs-comment">//token获取函数,token获取完成后,必须调用`setToken(token);`不然上传任务不会执行。</span> <a href="http://www.js-code.com/tag/setTimeout" title="浏览关于“setTimeout”的文章" target="_blank" class="tag_link">setTimeout</a>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ setToken(<span class="hljs-string">"token"</span>); }, <span class="hljs-number">1000</span>); }) <span class="hljs-comment">//任务拦截器</span> .<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>erceptor({ <span class="hljs-comment">//拦截任务,返回true,任务将会从任务队列中剔除,不会被上传</span> onIntercept: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">task</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> task.file.size &gt; <span class="hljs-number">1024</span> * <span class="hljs-number">1024</span>; }, <span class="hljs-comment">//中断任务,返回true,任务队列将会在这里中断,不会执行上传操作。</span> onInterrupt: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">task</span>) </span>{ <span class="hljs-keyword">if</span> (<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.onIntercept(task)) { <a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(<span class="hljs-string">"请上传小于1m的文件"</span>); <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } }, } <span class="hljs-comment">//你可以添加多个任务拦截器</span> .interceptor({...}) .listener({ onReady(tasks) { <span class="hljs-comment">//选择上传文件确定后,该生命周期函数会被回调。</span> },onStart(tasks){ <span class="hljs-comment">//开始上传</span> },onTaskGetKey(task){ <span class="hljs-comment">//为每一个上传的文件指定key,如果不指定则由七牛服务器自行处理</span> <span class="hljs-keyword">return</span> <span class="hljs-string">"test.png"</span>; },<span class="hljs-attr">onTaskProgress</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">task</span>) </span>{ <span class="hljs-comment">//每一个任务的上传进度,通过`task.progress`获取</span> <span class="hljs-built_in">console</span>.log(task.progress); },onTaskSuccess(task){ <span class="hljs-comment">//一个任务上传成功后回调</span> },onTaskFail(task) { <span class="hljs-comment">//一个任务在经历重传后依然失败后回调此函数</span> },onTaskRetry(task) { <span class="hljs-comment">//开始重传</span> },onFinish(tasks){ <span class="hljs-comment">//所有任务结束后回调,注意,结束不等于都成功,该函数会在所有HTTP上传请求响应后回调(包括重传请求)。</span> }} }).build(); <span class="hljs-comment">//如果auto设置为false,则需要手动启动上传。</span> <span class="hljs-comment">//uploader.start();</span> <span class="hljs-comment">//由于安全原因,display:none的file input,无法通过代码调用click方法,必须通过如下处理,让用户来实现click,从而打开文件选择窗口:</span> <span class="hljs-comment">//你可以自行监听<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>元素的click事件,在回调函数内部打开文件选择窗口。你也可以使用<a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>监听,下面使用的是原生的JavaScript的方式。</span> <a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a> = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">'button'</span>); button.addEventListener(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ uploader.chooseFile(); }</code></pre> <h2 id="articleHeader9">版本说明</h2> <ul> <li> <p>0.0.9 (2016-10-21)</p> <ul> <li> <p>分块上传,自定义上传域名</p> </li> </ul> </li> <li> <p>0.0.8 (2016-10-19)</p> <ul> <li> <p>fix bug,当没有选中任何文件的时候,会触发上传函数。</p> </li> </ul> </li> <li> <p>0.0.7 (2016-10-19)</p> <ul> <li> <p>更换上传域名为upload.q<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>iu.com</p> </li> </ul> </li> <li> <p>0.0.6 (2016-10-19)</p> <ul> <li> <p>绕过缓存,避免每次都上传同样的文件。</p> </li> </ul> </li> <li> <p>0.0.5 (2016-10-19)</p> <ul> <li> <p>tokenFunc(setToken,task)增加task参数</p> </li> </ul> </li> <li> <p>0.0.4 (2016-10-19)</p> <ul> <li> <p>修复了一个关于accept选项的bug。</p> </li> </ul> </li> <li> <p>0.0.3 (2016-10-19)</p> <ul> <li> <p>任务拦截器实现。</p> </li> </ul> </li> <li> <p>0.0.2 (2016-10-19)</p> <ul> <li> <p>基本功能的实现。</p> </li> </ul> </li> </ul> <h2 id="articleHeader10">维护人</h2> <p>知乎 : <a href="https://www.zhihu.com/people/lsxiao" rel="nofollow noreferrer" target="_blank">@面条</a></p> <p>Github : <a href="https://github.com/lsxiao" rel="nofollow noreferrer" target="_blank">@lsxiao</a></p> <h2 id="articleHeader11">开源许可</h2> <p>MIT</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

更好用的七牛云存储 JS SDK,因为官方的太难用

全部内容,希望文章能够帮你解决

更好用的七牛云存储 JS SDK,因为官方的太难用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过