FusionDesign中upload组件的补充用法1
原创FusionDesign中upload组件的补充用法1
原创
挥刀北上
发布于 2021-12-24 09:49:34
发布于 2021-12-24 09:49:34
今天给大家分享一下FusionDesign中upload组件的补充用法，Fusion的文档中介绍的使用方法基本都是依靠单独的Upload组件来完成，其实还有另外一种使用方法，文档的开发者并未写明在文档中，今天就将这种方法展示给大家：
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>
}看上面的代码，我们导入了Upload的selecter这个属性，这个属性也是一个组件，这个组件的内部大概是这样的：
<script>
function selectFile() {
$('#inputfile').click(); //点击父节点的时候主动触发 input 的点击
}
function onSelect(target) {
console.log(target.files); // 获取文件对象 File
}
</script>
<div role="upload" onclick="selectFile()">
<input type="file" style="display: none;" id="inputfile" onchange="onSelect(this)">
<button>Upload File</button>
</div>监听最外面的点击事件，然后触发input的点击事件，从而触发input：file选择文件的界面，当用户选择文件后，触发chang事件，调用onSelect方法，组件将onSlect方法暴露给组建的参数，这样就能得到文件对象了。
再看第二步：
import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter; // 文件选择器
const Uploader = Upload.Uploader; // 文件上传器
const Up = ()=>{
const uploader = new Uploader({
action: '/api/upload',
//onProgress: this.onProgress // 进度监控
});
handleSelect = (files) => {
// 上传文件
uploader.startUpload(files);
}
return <Selecter onSelect={this.handleSelect}>
<Button type="primary">Upload File</Button>
</Selecter>
}比上一段代码，这段导入了Uploader的一个Uploader属性，这个属性值是个类，这个类的实例上面有上传文件的方法，使用方法是，先实例化一个对象，实例化时可以传递配置参数，如action是上传地址。得到实例，然后调用startUpload上传文件。
不知道有没有同学发现上面代码的问题，我们没有设置文件的字段name，有两种方法可以设置，uploader实例化时或者调用setOptions方法：
import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter; // 文件选择器
const Uploader = Upload.Uploader; // 文件上传器
const Up = ()=>{
const uploader = new Uploader({
action: '/api/upload',
// name:'image'
//onProgress: this.onProgress // 进度监控
});
handleSelect = (files) => {
// 上传文件
uploader.setOptions({name:'image'})
uploader.startUpload(files)
}
return <Selecter onSelect={handleSelect}>
<Button type="primary">Upload1111 File</Button>
</Selecter>
}以上便是Fusion Design的Upload组件的其他使用方法的分享，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读