FilePicker 文件选择器

使用场景

从系统文件目录中选择部分文件进行上传。

请求库接入示例

<FilePicker

request={(options: any) =>

axios({

method: 'post',

url: 'http://127.0.0.1:7001/api/upload',

transformResponse: [].concat(axios.defaults.transformResponse, (data: any) => {

return {

url: data.data,

message: data.message,

};

}),

...options,

}).then((ret) => {

return ret.data;

})

}

onChange={console.log}

/>

需要将后端返回的数据转换为

{

"url": "foo.bar",

"message": "message body"

}

上传文件示例

FormData

- id: file_1

- name: test.png

- type: image/png

- file: (binary)

服务端接收示例

以 Egg 框架为例

const stream = await ctx.getFileStream();

const filename = stream.filename || stream.name;

const ret = await ctx.service.file.uploadStream(stream, filename);

示例

基本示例

• IMG.png
• test.png
• test.png

• IMG.png
• test.png
• test.png

noInline

// 以下变量从其他模块中引入： // axios const files = [ { id: '01', name: 'IMG.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', }, { id: '02', name: 'test.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', }, { id: '03', name: 'test.png', url: 'https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png', }, ]; const getRequest = (options) => axios({ method: 'post', url: 'http://127.0.0.1:7001/api/upload', transformResponse: [].concat(axios.defaults.transformResponse, (data) => { return { url: data.data, message: data.message, }; }), onUploadProgress: (e) => { console.log(e); // TODO: display progress info }, ...options, }).then((ret) => { return ret.data; }); const Basic = () => ( <Group spacingY="l" display="block"> <FilePicker defaultValue={files} request={getRequest} onChange={console.log} /> <FilePicker defaultValue={files} disabled onChange={console.log} /> </Group> ); render(<Basic />)

// 以下变量从其他模块中引入：
//  axios

const files = [
  {
    id: '01',
    name: 'IMG.png',
    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
  },
  {
    id: '02',
    name: 'test.png',
    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
  },

  {
    id: '03',
    name: 'test.png',
    url: 'https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png',
  },
];

const getRequest = (options) =>
  axios({
    method: 'post',
    url: 'http://127.0.0.1:7001/api/upload',
    transformResponse: [].concat(axios.defaults.transformResponse, (data) => {
      return {
        url: data.data,
        message: data.message,
      };
    }),
    onUploadProgress: (e) => {
      console.log(e);
      // TODO: display progress info
    },
    ...options,
  }).then((ret) => {
    return ret.data;
  });

const Basic = () => (
  <Group spacingY="l" display="block">
    <FilePicker defaultValue={files} request={getRequest} onChange={console.log} />

    <FilePicker defaultValue={files} disabled onChange={console.log} />
  </Group>
);

render(<Basic />)

多媒体

• 
• 
• 

• 
• 
• 

noInline

// 以下变量从其他模块中引入： // axios const files = [ { id: '01', name: 'IMG.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', }, { id: '02', name: 'test.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', }, { id: '03', name: 'test.png', url: 'https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png', }, ]; const getRequest = (options) => axios({ method: 'post', url: 'http://127.0.0.1:7001/api/upload', transformResponse: [].concat(axios.defaults.transformResponse, (data) => { return { url: data.data, message: data.message, }; }), onUploadProgress: (e) => { console.log(e); // TODO: display progress info }, ...options, }).then((ret) => { return ret.data; }); const Media = () => { return ( <Group spacingY="l"> <MediaPicker defaultValue={files} request={getRequest} onChange={console.log} /> <MediaPicker defaultValue={files} request={getRequest} onChange={console.log} disabled /> </Group> ); }; render(<Media />)

// 以下变量从其他模块中引入：
//  axios

const files = [
  {
    id: '01',
    name: 'IMG.png',
    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
  },
  {
    id: '02',
    name: 'test.png',
    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
  },

  {
    id: '03',
    name: 'test.png',
    url: 'https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png',
  },
];

const getRequest = (options) =>
  axios({
    method: 'post',
    url: 'http://127.0.0.1:7001/api/upload',
    transformResponse: [].concat(axios.defaults.transformResponse, (data) => {
      return {
        url: data.data,
        message: data.message,
      };
    }),
    onUploadProgress: (e) => {
      console.log(e);
      // TODO: display progress info
    },
    ...options,
  }).then((ret) => {
    return ret.data;
  });

const Media = () => {
  return (
    <Group spacingY="l">
      <MediaPicker defaultValue={files} request={getRequest} onChange={console.log} />

      <MediaPicker defaultValue={files} request={getRequest} onChange={console.log} disabled />
    </Group>
  );
};

render(<Media />)

拖拽上传

上传文件

可以拖拽文件到此处进行文件上传操作

上传文件

可以拖拽文件到此处进行文件上传操作

noInline

// 以下变量从其他模块中引入： // axios const getRequest = (options) => axios({ method: 'post', url: 'http://127.0.0.1:7001/api/upload', transformResponse: [].concat(axios.defaults.transformResponse, (data) => { return { url: data.data, message: data.message, }; }), onUploadProgress: (e) => { console.log(e); // TODO: display progress info }, ...options, }).then((ret) => { return ret.data; }); const DragFile = () => { return ( <Group spacingY="l" width="800px"> <FilePicker renderTrigger={(props) => <FilePicker.DragFileTrigger {...props} />} request={getRequest} onChange={console.log} /> <FilePicker renderTrigger={(props) => <FilePicker.DragFileTrigger {...props} />} request={getRequest} onChange={console.log} disabled /> </Group> ); }; render(<DragFile />)

// 以下变量从其他模块中引入：
//  axios

const getRequest = (options) =>
  axios({
    method: 'post',
    url: 'http://127.0.0.1:7001/api/upload',
    transformResponse: [].concat(axios.defaults.transformResponse, (data) => {
      return {
        url: data.data,
        message: data.message,
      };
    }),
    onUploadProgress: (e) => {
      console.log(e);
      // TODO: display progress info
    },
    ...options,
  }).then((ret) => {
    return ret.data;
  });

const DragFile = () => {
  return (
    <Group spacingY="l" width="800px">
      <FilePicker
        renderTrigger={(props) => <FilePicker.DragFileTrigger {...props} />}
        request={getRequest}
        onChange={console.log}
      />
      <FilePicker
        renderTrigger={(props) => <FilePicker.DragFileTrigger {...props} />}
        request={getRequest}
        onChange={console.log}
        disabled
      />
    </Group>
  );
};

render(<DragFile />)

文件上传状态

• img.png
• test.png
• test02.png

• 
• 
• 

noInline

const files = [ { id: '01', name: 'IMG.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', }, { id: '02', name: 'test.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', }, { id: '03', name: 'test.png', url: 'https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png', }, ]; const Status = () => { const files = [ { id: '01', name: 'img.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', status: 'success', }, { id: '02', name: 'test.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', status: 'error', }, { id: '03', name: 'test02.png', url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', status: 'process', }, ]; return ( <Group spacingY="l" display="block"> <FilePicker defaultValue={files} onChange={console.log} /> <MediaPicker defaultValue={files} onChange={console.log} /> </Group> ); }; render(<Status />)

const files = [
  {
    id: '01',
    name: 'IMG.png',
    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
  },
  {
    id: '02',
    name: 'test.png',
    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
  },

  {
    id: '03',
    name: 'test.png',
    url: 'https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png',
  },
];

const Status = () => {
  const files = [
    {
      id: '01',
      name: 'img.png',
      url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
      status: 'success',
    },
    {
      id: '02',
      name: 'test.png',
      url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
      status: 'error',
    },
    {
      id: '03',
      name: 'test02.png',
      url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
      status: 'process',
    },
  ];
  return (
    <Group spacingY="l" display="block">
      <FilePicker defaultValue={files} onChange={console.log} />
      <MediaPicker defaultValue={files} onChange={console.log} />
    </Group>
  );
};

render(<Status />)

文件类型

inline

() => { // 只能选图片 return <MediaPicker accept="image/*" onChange={console.log} />; }

() => {
  // 只能选图片
  return <MediaPicker accept="image/*" onChange={console.log} />;
}

文件多选

inline

() => { return <FilePicker multiple onChange={console.log} />; }

() => {
  return <FilePicker multiple onChange={console.log} />;
}

API

FilePicker

字段	描述
renderTrigger	(props: FilePickTriggerProps) => ReactNode 渲染触发器
value	RexFile[] 受控值
defaultValue	RexFile[] 非受控默认值
onChange	FormControlOnChangeHandler<RexFile[]> 文件上传成功后的回调
request	RequestType 自定义请求方法
multiple	boolean 是否可以选择多个文件
accept	string 可以选择的文件类型，例如 `image/*`, `video/*`
disabled	boolean 是否禁用
className	string 自定义样式名

MediaPicker

字段	描述
renderTrigger	(props: FilePickTriggerProps) => ReactNode 渲染触发器
value	RexFile[] 受控值
defaultValue	RexFile[] 非受控默认值
onChange	FormControlOnChangeHandler<RexFile[]> 文件上传成功后的回调
request	RequestType 自定义请求方法
multiple	boolean 是否可以选择多个文件
accept	string 可以选择的文件类型，例如 `image/*`, `video/*`
disabled	boolean 是否禁用
className	string 自定义样式名