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

Question

我遵循了文件上传示例，此示例现在可以将文件上传到 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上传新选择的文件

这是我应该考虑的事情吗

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
}
}

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