3.Ant Design Pro V2 文件上传

准备

控件的资料可以查看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：