react 上传图片到 七牛

Question

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

Answer 1

<script src="/js/plupload.full.min.js"></script>
<script src="https://cdn.staticfile.org/qi...;></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

https://github.com/lenage/rea...