文件上传

文件上传是一个高级上传器，具有拖放支持、多文件上传、自动上传、进度跟踪和验证。

导入#


import { FileUpload } from 'primereact/fileupload';

基本#

文件上传基本模式提供了一个更简单的 UI，作为默认高级模式的替代方案。

选择


<Toast ref={toast}></Toast>
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />

自动#

当启用 auto 属性时，文件在选择后会立即上传。

浏览


<Toast ref={toast}></Toast>
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />

高级#

文件上传是一个高级上传器，具有拖放支持、多文件上传、自动上传、进度跟踪和验证。

选择

将文件拖放到此处以上传。


<FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />

模板#

上传器 UI 可以通过模板进行自定义。

0 B/ 1 MB

将图像拖放到此处


<Toast ref={toast}></Toast>

<Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
<Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
<Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />

<FileUpload ref={fileUploadRef} name="demo[]" url="/api/upload" multiple accept="image/*" maxFileSize={1000000}
    onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
    headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
    chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} />

自定义上传#

可以使用 customUpload 属性并定义自定义 uploadHandler 函数来覆盖上传实现。

选择


<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />

无障碍#

屏幕阅读器

文件上传使用隐藏的带有 type="file" 的原生 input 元素，用于屏幕阅读器。

键盘支持

上传器的交互式元素是按钮，请访问按钮无障碍部分以获取更多信息。