react-qiniu, 将文件上载到Qiniu的响应组件

分享于 

3分钟阅读

GitHub

  繁體 雙語
A React Component to upload file to Qiniu
  • 源代码名称:react-qiniu
  • 源代码网址:http://www.github.com/lenage/react-qiniu
  • react-qiniu源代码文档
  • react-qiniu源代码下载
  • Git URL:
    git://www.github.com/lenage/react-qiniu.git
    Git Clone代码到本地:
    git clone http://www.github.com/lenage/react-qiniu
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/lenage/react-qiniu
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应 qiniu

    响应组件将文件上载到 Qiniu

    请参见演示:http://lenage.com/react-qiniu/

    用法

    只要 require('react-qiniu') 并指定一个 onDrop 方法,接受除去的文件的array 并将你的Qiniu token 作为prop传递。

    还可以指定要应用到放置区域的样式对象。 可以选择传入大小属性以配置放置区域的大小。

    varReact =require('react');varQiniu =require('react-qiniu');varReactQiniuDemo =React.createClass({
     getInitialState: function () {
     return {files: [],token:'YOUR_UPLOAD_TOKEN',uploadKey:'YOUR_CUSTOM_UPLOAD_KEY',// Optionalprefix:'YOUR_QINIU_KEY_PREFIX'// Optional };
     },
     onUpload: function (files) {// set onprogress function before uploading files.map(function (f) { f.onprogress=function(e) {
     console.log(e.percent);
     };
     });
     },
     onDrop: function (files) { this.setState({files: files });// files is a FileList(https://developer.mozilla.org/en/docs/Web/API/FileList) Object// and with each file, we attached two functions to handle upload progress and result// file.request => return super-agent uploading file request// file.uploadPromise => return a Promise to handle uploading status(what you can do when upload failed)// `react-qiniu` using bluebird, check bluebird API https://github.com/petkaantonov/bluebird/blob/master/API.md// see more example in example/app.jsconsole.log('Received files:', files);
     },
     render: function () { return (
     <div>
     <QiniuonDrop={this.onDrop}size={150}token={this.state.token}uploadKey={this.state.uploadKey}onUpload={this.onUpload}>
     <div>Try dropping some files here, or click to select files to upload.</div>
     </Qiniu>
     </div>
     );
     }
    });React.render(<ReactQiniuDemo/>, document.body);

    上传时,我们将向文件对象添加 promise,见 index.js,因此,你可以处理这里承诺来处理上传状态。 ( 成功/失败时做一些事情)

    示例/app。js中查看更多内容

    • fork ( https://github.com/lingochamp/react-qiniu/fork )
    • 创建你的特征分支( git checkout -b my-new-feature )
    • 提交你的更改( git commit -am 'Add some feature' )
    • 推送到分支( git push origin my-new-feature )
    • 创建新的拉请求

    谢谢

    @paramaggarwal@mingxinstar

    许可证

    MIT


    相关文章