材质用户界面-文件上传-

Question

在Material UI上上传文件后-我能否指定它可以接受的文件类型-仅仅是在文本字段中添加“接受”之类的参数吗？

我要上传多个文件？即时创建这些TextField文件类型-是否要注册redux表单？

https://redux-form.com/8.2.2/examples/fieldarrays/

我正在考虑创建一个拖放界面来隐藏这些字段-但在用户将文件拖放到该接口时填充它们-但是如何以编程方式更改上载字段-除非修改input.value？

这是我当前文件的“上载”字段的样子-我在右侧添加了一个回形针附件图标-因此它有点像带有日历图标的日期选择器-或呈现了当前存储图像的一些缩略图

或者它是InputProps的一部分-“ accept”：“ image / png，image / jpeg”

import React from 'react';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';

import AttachFileIcon from '@material-ui/icons/AttachFile';

const renderFileUpload = ({input, rows, multiline, label, required, type, placeholder, fieldRef, onClick, disabled, meta: { touched, error, warning } }) => {
  let previewUrl = "";

  if(input.value && input.value.length > 0){
    if(typeof input.value === "string"){
      previewUrl = input.value;
    }
    if(typeof input.value === "object"){
      //previewUrl = input.value[0].name;
    }
  }
  console.log("previewUrl", previewUrl);

  delete input.value;
  
  return (
  <FormControl component="fieldset" fullWidth={true}>    
    <TextField
      className="fileUpload"
      label={required ? label + " *": label}
      type={type}
      error={touched && (error && error.length > 0 ? true : false)}
      helperText={touched &&
        ((error && error.length > 0 ? error : null) || 
        (warning && warning.length > 0 ? warning : null))
      }
      InputLabelProps={{shrink: true}}
      disabled={disabled}
      {...input}
    />
    <div className="previewIcon">
      {previewUrl && previewUrl.length > 0 ?
        (
          <img src={previewUrl} />
        ):
        (
          <AttachFileIcon />
        )
      }
    </div>
  </FormControl>
)}

export default renderFileUpload;