Question

我关注File upload example和this example我现在可以将文件上传到s3。但是当涉及到编辑或替换该文件时，我应该如何处理。

const CustomFile = t.irreducible('File', x => x instanceof File);

// MyModel
const BusinessModel = t.struct({
  logo: t.maybe(CustomFile),
  name: t.String,
}, 'BusinessModel');

// options
const options = {
  fields: {
    logo: {
      type: 'file'
    }
  }
};

我的回复对象是

{
  "name": "business name",
  "logo": {
    "url": "https://some.url.to/s3/logo.png",
    "large": {
      "url": "https://some.url.to/s3/logo_large.png"
    }
  }
}

那么我如何得到响应logo以适应BusinessModel，以便在文件存在时显示预览。

onChange它显示新文件的预览

onSubmit上传新选择的文件

is this something我应该考虑

Answer 1

class MyFileComponent extends t.form.Component { 
  getTemplate() {
    return (locals) => {
      return (
        <div className="form-group">
          {
            getLabel({
              label: locals.label,
            })
          }
          <div>
          { this.renderPreview(locals) }
            <label lang="en" className="custom-file ml-3">
              <input type="file" className="custom-file-input" accept="image/*" onChange={evt => locals.onChange(evt.target.files[0])} />
              <span className="custom-file-control"></span>
            </label>
          </div>
          { getError(locals) }
          { getHelp(locals) }
        </div>
      );
    };
  }

  renderPreview(locals) {
    // your code
  }
}

这就是我所做的我还没有处理突出显示的错误，但这当然适用于单个文件上传。

文件预览并使用gcanti / tcomb-form重新上传

1 个答案: