准备
控件的资料可以查看ant desgin的文档:https://ant.design/components/upload-cn/
选一个自己喜欢的上传控件类型,然后开始吧
开始
我选的是拖拽式的上传文件方式
可以点底部的按钮来查看代码
额,代码有点长看起来不方便,但是人家很人性化的提供了几种查看方式
我喜欢CodeSandbox,因为它会把头部的引用部分也显示出来,方便我们这种复制粘贴党
主要就是引用一个ant中的upload组件
import { Upload, Icon, message } from 'antd';
然后定义一些属性
const props = {
name: 'file',
multiple: true,
action: '//jsonplaceholder.typicode.com/posts/',
onChange(info) {
const status = info.file.status;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`);
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
这些属性干啥用的我都是猜的,你们别当真
name: