今天分享一下fusionUI上传组件Upload的使用,先看一下最简单的使用:
import { Upload, Button, Icon } from '@alifd/next';
const style = {display: 'inline-block', marginRight: 10};
ReactDOM.render(<div style={{display: 'flex'}}>
<Upload
action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
beforeUpload={beforeUpload}
onChange={onChange}
onSuccess={onSuccess}
multiple
defaultValue={[{
name: 'IMG.png',
state: 'done',
size: 1024,
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'
}]}
style={style}
>
<Button type="primary" style={{margin: '0 0 10px'}}>Upload File</Button>
</Upload>
<Upload shape="card" style={style}>
Upload File
</Upload>
<Upload style={style}>
<div className="next-upload-card">
<Icon type="attachment" size="large"/>
<div className="next-upload-text">
Attachment
</div>
</div>
</Upload>
</div>, mountNode);
function beforeUpload(info) {
console.log('beforeUpload : ', info);
}
function onChange(info) {
console.log('onChange : ', info);
}
function onSuccess(info) {
console.log('onSuccess : ', info);
}
主要是看upload组件的参数,常用参数有如下几个:
我们在使用时该使用哪些参数呢?这取决于你的使用方式,如果只是一个单独的上传文件的组件一般需要三个参数,action、onChange、name属性。
upLoad组件内部封装了一个input:file表单元素,这个元素也可单独使用。其内部的原理是触发chang事件,在事件参数中获取文件对象,然后利用formData构造上传对象,利用ajax实现异步上传:
function upload(file) {
const xhr = new XMLHttpRequest();
// 上传进度
xhr.upload.onprogress = function progress(e) {
};
// 上传状态
xhr.onload = function onload() {
};
const formData = new FormData();
// 往 formData 里面增加要上传的文件对象
formData.append('filename', file);
// 指定 api 接口和上传方式
xhr.open('POST', '/api/upload', true);
// 开始发送数据
xhr.send(formData);
}
但是这里需要注意,我们需要和后端约定文件字段,上面的代码是filename,那么后端在处理前端数据时是通过filename字段来获取上传的文件对象的,如果upload组件不设置name字段,其默认值为file:
上传完成后,会调用onChang或者onSuccess事件,我们可以在事件参数得到服务端的返回值,通常是文件的线上url,此时可以动态的修改一些值。这是作为单独组件使用。
如果放到表单中的话,我们需要将其用FormItem组件进行包裹,这样表单再出发onSubmit事件时,得到的表单对象中某个属性会指向文件上传对象的所有信息,包括服务端返回的文件存贮url,这里的属性的key值就是为upload组件设置的name值。
当然upload组件还有其他操作,这里只是介绍其最简单的用法,希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。