Upload 上传

代码演示

customRequest

通过 customRequest 属性可以自定义上传行为

tsx

customRequest = ({file, onProgress, onSuccess, onError}) => {
    // file: File 上传的文件对象
    // onProgress: Function 上传进度回调
    // onSuccess: Function 上传成功回调
    // onError: Function 上传失败回调
}

属性

属性	说明	类型	默认值
classList	自定义class	Object	-
class	自定义class	string	-
style	自定义样式	Object
action	上传的地址	string
name	name属性	string
multiple	是否支持多选文件	boolean
webkitdirectory	是否开启选择文件夹，部分浏览器适用	boolean
accept	接受上传的文件类型	string
beforeUpload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传	Function
format	支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名	string[]
maxSize	文件大小限制，单位b	Number
headers	设置上传的请求头部	Object
withCredentials	支持发送 cookie 凭证信息	boolean
data	上传时附带的额外参数	Object
defaultFileList	默认已上传的文件列表	Array
type	上传控件的类型	select \| drag	select
paste	是否支持粘贴上传文件	boolean
ref	组件引用	any
getFileUrl	自定义预览的url地址	Function
listType	列表的类型 picture	boolean
customRequest	自定义上传行为	`({file, onProgress, onSuccess, onError}) => void`
onProgress	文件上传时的钩子，返回字段为 event, file, fileList	Function
onSuccess	文件上传成功时的钩子，返回字段为 response, file, fileList	Function
onError	文件上传失败时的钩子，返回字段为 error, file, fileList	Function
onRemove	文件列表移除文件时的钩子，返回字段为 file, fileList	Function
onPreview	点击已上传的文件链接时的钩子，返回字段为可以通过 file.response 拿到服务端返回数据	Function
onFormatError	文件格式验证失败时的钩子，返回字段为 file, fileList	Function
onExceededSize	文件超出指定大小限制时的钩子，返回字段为 file, fileList	Function

事件

事件名称	说明	返回值
`onProgress`	文件上传时的钩子	event, file, fileList
`onSuccess`	文件上传成功时的钩子	response, file, fileList
`onError`	文件上传失败时的钩子	error, file, fileList
`onRemove`	文件列表移除文件时的钩子	file, fileList
`onPreview`	点击已上传的文件链接时的钩子	file
`onFormatError`	文件格式验证失败时的钩子	file, fileList
`onExceededSize`	文件超出指定大小限制时的钩子	file, fileList