无法在redux form@7.0.4上传图像文件

时间:2017-11-29 08:58:31

标签: reactjs ecmascript-6 redux redux-form

我尝试使用redux格式上传动态多图像文件。由于<input type="file" />不支持设置值。我定义了名为FileInput的函数

const FileInput = ({ input:{value: omitValue,...inputProps}, label, type,
  meta: { touched, error, warning } }) => (
        <div>
        <input
          type={type} {...inputProps} className='form-control'
        />
        {touched && error && <span className="text-danger">{error}</span>}
        </div>)

form.js

const Form = props => {
  const { handleSubmit, pristine, reset, submitting} = props
  return (
   <form onSubmit={handleSubmit(handleProductInfo)} encType='multipart/form-data'>
          <div className="form-group ">
            <label>Thumbnail Image</label>
            <Field name="thumbnailImage"
               component={FileInput}
               type="file"
            />
          </div>
   </form>

生成上传字段输入标记

const renderImageFeatures = ({ fields, meta: { error, submitFailed } }) => (
  <div>
      <button type="button" className="btn btn-success" onClick={() => fields.push({})}>
        <i className="fa fa-plus-circle" aria-hidden="true"></i> Add Images
      </button>
      {submitFailed && error && <div className="text-danger">{error}</div>}
      <ul className="featuresList">
        {fields.map((imagefeatures, index) => (
          <li key={index} className="col-md-2  my-2">
          <button
              type="button"
              title="Remove Image"
              className="btn btn-danger pull-right"
              onClick={() => fields.remove(index)}
            ><i className="fa fa-trash" aria-hidden="true"></i>
            </button>
            <h5>Image #{index + 1}</h5>
            <div className="form-group">
            <Field name={`${imagefeatures}.image`}
               component={FileInput}
               type="file"
            />
            </div>
          </li>
        ))}
      </ul>
</div>
)

在开发者工具中,正在显示上传的文件信息enter image description here 但在网络标签页中,它显示为enter image description here

0 个答案:

没有答案