Supplementary usage of upload component in fusiondesign 1

Today I'd like to share with you FusionDesign in upload Supplementary usage of components ,Fusion The use methods described in the documentation of are basically dependent on a separate Upload Components to complete , There is another way to use it , The developer of the document did not write it in the document , Today I will show you this method ：

import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter;

const Up = ()=>{
  const handleSelect = (files) => {
    // get files
  }
  return<Selecter onSelect={this.handleSelect}>
  <Button type="primary">Upload File</Button>
</Selecter>

}

See the code above , We imported Upload Of selecter This attribute , This attribute is also a component , The inside of this component is like this ：

<script>
function selectFile() {
  $('#inputfile').click(); // When the parent node is clicked, it is triggered automatically  input  Click on 
}
function onSelect(target) {
  console.log(target.files); //  Get file object   File
}
</script>
<div role="upload" onclick="selectFile()">
  <input type="file" style="display: none;" id="inputfile" onchange="onSelect(this)">
  <button>Upload File</button>
</div>

Listen for the outermost click event , Then the trigger input Click events for , triggering input：file The interface for selecting files , When the user selects a file , Trigger chang event , call onSelect Method , Components will onSlect Method is exposed to the parameters of the build , So you can get the file object .

Look at the second step ：

import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter; //  File selector 
const Uploader = Upload.Uploader; //  File uploader 

const Up = ()=>{
 const uploader = new Uploader({
    action: '/api/upload',
  //onProgress: this.onProgress //  Progress monitoring 
  });

  handleSelect = (files) => {
    //  Upload files 
   uploader.startUpload(files);
  }

  return <Selecter onSelect={this.handleSelect}>
    <Button type="primary">Upload File</Button>
  </Selecter>
}

Compared with the previous code , This segment is imported Uploader One of the Uploader attribute , This attribute value is a class , The instance of this class has the method of uploading files , How to use it , Instantiate an object first , Configuration parameters can be passed during instantiation , Such as action It's the upload address . Get an example , And then call startUpload Upload files .

I don't know if any students have found the problem with the above code , We didn't set the file fields name, There are two ways to set ,uploader When instantiating or calling setOptions Method ：

import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter; //  File selector 
const Uploader = Upload.Uploader; //  File uploader 

const Up = ()=>{
 const uploader = new Uploader({
    action: '/api/upload',
    // name:'image'
  //onProgress: this.onProgress //  Progress monitoring 
  });

  handleSelect = (files) => {
    //  Upload files 
    uploader.setOptions({name:'image'})
    uploader.startUpload(files)
  }

  return   <Selecter onSelect={handleSelect}>
    <Button type="primary">Upload1111 File</Button>
  </Selecter>
}

The above is Fusion Design Of Upload Share other usage methods of components , I hope it helped you .