@beisen-phoenix/field-upload
v3.3.55
Published
| name | description | type | default | | ---------- | ---------------------------------------- | -------- | ------- | | multiple | 是否允许多张上传 | boolean | true | | maxSize | 文件的最大体积,单位为M | number | 99999 | | maxFil
Downloads
872
Readme
| name | description | type | default | | ---------- | ---------------------------------------- | -------- | ------- | | multiple | 是否允许多张上传 | boolean | true | | maxSize | 文件的最大体积,单位为M | number | 99999 | | maxFiles | 允许上传的最大文件数 | number | 9 | | accept | 允许上传的文件类型(.png 只接受png图片 image/ ** 接受所有类型的图片 ["image/", "video/mp4"] 只接受图片和mp4的视频 ) | string/string[] | | |url| 上传服务器地址 | string|| |listType|文件列表展示形式('block'/'list')| string | block| |value|已经上传的文件| object[] | | |onError|上传过程中服务器报错后的回调函数| (data) => void|| |onChange | 文件上传到服务器后的回调函数 | (data) => void | | |onDelete | 删除附件的回调函数 | (data) => void | | |parseResponse| 附件上传成功后的回调函数,用来解析后端返回的数据| (data) => object| | |customButton | 自定义的上传按钮| JSX.Element | | |showFileList | 是否显示附件列表| boolean | true | |isPreview | 是否用于表单展示态 | boolean | false |
已选值example
const defaultValue = [
{
id:'1',
name: '1.jpg',
status: 'done',
mediaType: 'jpg',
downloadUrl:'http://a.hiphotos.baidu.com/image/h%3D300/sign=455610afdfc8a786a12a4c0e5708c9c7/5bafa40f4bfbfbedcb2d862a76f0f736afc31f6a.jpg',
previewUrl: 'http://a.hiphotos.baidu.com/image/h%3D300/sign=455610afdfc8a786a12a4c0e5708c9c7/5bafa40f4bfbfbedcb2d862a76f0f736afc31f6a.jpg'
},
{
id:'2',
name: '2.jpg',
status: 'done',
mediaType: 'jpg',
downloadUrl: 'http://c.hiphotos.baidu.com/image/pic/item/f9198618367adab400b6982c85d4b31c8701e47f.jpg',
previewUrl: 'http://c.hiphotos.baidu.com/image/pic/item/f9198618367adab400b6982c85d4b31c8701e47f.jpg'
},
{
id:'3',
name: '3.jpg',
status: 'done',
mediaType: 'jpg',
downloadUrl: 'http://e.hiphotos.baidu.com/image/pic/item/574e9258d109b3dea897b509c2bf6c81800a4ca2.jpg',
previewUrl: 'http://e.hiphotos.baidu.com/image/pic/item/574e9258d109b3dea897b509c2bf6c81800a4ca2.jpg'
},
{
id:'4',
name: '4.jpg',
status: 'done',
mediaType: 'jpg',
downloadUrl: 'http://a.hiphotos.baidu.com/image/pic/item/ac4bd11373f08202e2518d6d45fbfbedaa641ba4.jpg',
previewUrl: 'http://a.hiphotos.baidu.com/image/pic/item/ac4bd11373f08202e2518d6d45fbfbedaa641ba4.jpg'
},
{
id:'5',
name: '5.jpg',
status: 'done',
mediaType: 'jpg',
downloadUrl: 'http://f.hiphotos.baidu.com/image/pic/item/8644ebf81a4c510fbc2b0d4d6e59252dd52aa5fe.jpg',
previewUrl: 'http://f.hiphotos.baidu.com/image/pic/item/8644ebf81a4c510fbc2b0d4d6e59252dd52aa5fe.jpg'
},
{
id:'6',
name: '6.jpg',
status: 'done',
mediaType: 'jpg',
downloadUrl:'http://e.hiphotos.baidu.com/image/pic/item/bf096b63f6246b60885f311be5f81a4c510fa208.jpg',
previewUrl: 'http://e.hiphotos.baidu.com/image/pic/item/bf096b63f6246b60885f311be5f81a4c510fa208.jpg'
}
]
parseResponse
此函数用来解析上传接口返回的数据,并根据返回的数据构造出符合要求的数据结构,此函数返回的数据用来显示附件列表、处理图片上传以及下载
{
id:string, // 必须返回的参数
name:stirng, // 附件的名称
status?: EStatus,// 该文件的上传状态,非必填,默认是EStatus.done,如果不是该状态,需要调用 EStatus对象,并使用正确的标识
mediaType: 'string', // 必填,代表文件的类型 比如jpg png
downloadUrl?: string, // 如果需要支持附件下载,需要传递此参数
previewUrl?: string // 如果需要支持附件预览,需要传递此参数
}