react 如何 上传图片到七牛

Question

react 如何 上传图片到七牛， 求一个 demo

Answer 1

<script src="/js/plupload.full.min.js"></script>
<script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>

  componentDidMount(){
    this.initQiniu();
  }


  initQiniu(){
    var _this = this;
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',      // 上传模式,依次退化
        browse_button: 'pickfiles',         // 上传选择的点选按钮，**必需**
        uptoken_url: 'url to fetch token',         // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）
        get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的 uptoken
        unique_names: true,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
        domain: 'xxx',     // bucket 域名，下载资源时用到，**必需**
        container: 'container',             // 上传区域 DOM ID，默认是 browser_button 的父元素，
        max_file_size: '100mb',             // 最大文件体积限制
        flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入 flash,相对路径
        max_retries: 3,                     // 上传失败最大重试次数
        dragdrop: true,                     // 开启可拖曳上传
        drop_element: 'container',          // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                  // 分块上传时，每块的体积
        auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
        init: {
            'FilesAdded': (up, files) => {
                plupload.each(files, function(file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': (up, file) => {
              // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': (up, file) => {
              // 每个文件上传时,处理相关的事情
              this.setState({
                isUploading: true,
              });
            },
            'FileUploaded': (up, file, info) => {
              const domain = window.domain;
              const res = JSON.parse(info);
              const sourceLink = domain + res.key; //获取上传成功后的文件的Url
              this.setState({
                fileUrl: sourceLink,
                isUploading: false
              });
            },
            'Error': (up, err, errTip) => {
                   //上传出错时,处理相关的事情
            },
            'UploadComplete': () => {
                   //队列文件处理完毕后,处理相关的事情
            },
        }
    });
  }

render(){
    return(
                <div id="container">
                  <div id="pickfiles">上传</div>
                </div>
    )
}

Answer 2

七牛网上传文件的api，自己查一下吧。
在react当作一个ajax来请求就好了。

Answer 3

可以参考我写的组件 https://segmentfault.com/a/11...