React uploads pictures to Qiniu

how do react upload pictures to Qiniu, and ask for a demo with a small dish

Mar.02,2021

< 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,              //  falsekey 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>
)

}


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

Menu