[comp:upload]新增文件上传组件

[typistZxd]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

接口设计

API

IxUpload

UploadProps

名称	说明	类型	默认值	全局配置	备注
accept	允许上传的文件类型，详见原生input accept	string	-	-	-
action	上传文件的地址，必填	string | (file: UploadFile) => Promise<string>	-	-	-
customRequest	覆盖内置的上传行为，自定义上传实现	(option: UploadRequestOption) => void	-	-	-
data	上传附加的参数	Record<string, unknown> | ((file: UploadFile) => Record<string, unknown> | Promise<Record<string, unknown>>)	-	-	-
drag	是否启用拖拽上传	boolean	false	-	-
v-model:fileList	文件列表	UploadFile[]	[]	-	-
directory	支持上传文件夹（caniuse）	boolean	false	-	-
disabled	是否禁用	boolean	false	-	-
headers	设置上传请求的请求头	object	-	-	-
maxCount	限制上传文件的数量。当为 1 时，始终用最新上传的文件代替当前文件	number	-	-	-
method	上传请求的http method	string	post	-	-
multiple	是否支持多选文件，开启后按住 ctrl 可选择多个文件	boolean	false	-	-
name	发到后台的文件参数名	string	file	-	-
withCredentials	请求是否携带cookie	boolean	false	-	-
transformFile	在上传之前转换文件。支持返回一个 Promise 对象	(file: File) => string | Blob | File | Promise<string | Blob | File>	-	-	-
onSelect	选中文件时钩子，根据返回结果是否允许添加到上传列表	(file: File | File[]) => boolean | Promise<boolean>	() => true	-	-
onChange	上传文件改变时的状态 file：当前变化的文件对象 fileList：当前文件列表	(file: UploadFile) => void	-	-	-
onBeforeUpload	文件上传前的钩子，根据返回结果是否上传 返回false阻止上传 返回Promise对象reject时停止上传 返回Promise对象resolve时开始上传	(file: UploadFile | UploadFile[]) => boolean | Promise<boolean>	() => true	-	-
onStart	开始上传的钩子	(file: UploadFile) => void	-	-	-
onProgress	上传中的钩子	(e: ProgressEvent, file: UploadFile | UploadFile[], xhr: XMLHttpRequest) => void	-	-	-
onCancel	上传过程中取消上传的钩子	(res: Response, file: UploadFile, xhr: XMLHttpRequest) => void	-	-	-
onEnd	上传完成的钩子	(res: Response, file: UploadFile, xhr: XMLHttpRequest) => void	-	-	-

IxUploadTextList 文本列表展示

UploadTextListProps

名称	说明	类型	默认值	全局配置	备注
fileIcon	文件列表中文件的icon	string | boolean | VNode	paper-clip	-	-
downloadIcon	渲染下载按钮，false不展示	string | boolean | VNode	false	-	-
removeIcon	渲染移除按钮，false不展示	string | boolean | VNode	close	-	-
retryIcon	渲染重新上传按钮，失败时展示，false不展示	string | boolean | VNode	reload	-	-
onDownload	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 返回值为 false 时不移除，支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不允许下载	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onPreview	点击文件链接或预览图标时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onRemove	点击移除文件时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onRetry	点击重新上传时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-

IxUploadImageList 图片列表展示

UploadImageListProps

名称	说明	类型	默认值	全局配置	备注
thumb	展示的缩略图，false不展示缩略图，string作为缩略图url	false | ((file: UpLoadFile) => string | false | Promise<string | false>)	-	-	-
previewIcon	渲染预览按钮，false不展示	string | boolean | VNode	eye	-	-
downloadIcon	渲染下载按钮，false不展示	string | boolean | VNode	false	-	-
removeIcon	渲染移除按钮，false不展示	string | boolean | VNode	close	-	-
retryIcon	渲染重新上传按钮，失败时展示，false不展示	string | boolean | VNode	reload	-	-
onDownload	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 返回值为 false 时不移除，支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不允许下载	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onPreview	点击文件链接或预览图标时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onRemove	点击移除文件时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onRetry	点击重新上传时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-

IxUploadImageCardList 卡片图列表展示

配置卡片图则自带上传按钮

UploadImageCardListProps

名称	说明	类型	默认值	全局配置	备注
thumb	展示的缩略图，false不展示缩略图，string作为缩略图url	false | ((file: UpLoadFile) => string | false | Promise<string | false>)	-	-	-
previewIcon	渲染预览按钮，false不展示	string | boolean | VNode	eye	-	-
downloadIcon	渲染下载按钮，false不展示	string | boolean | VNode	false	-	-
removeIcon	渲染移除按钮，false不展示	string | boolean | VNode	close	-	-
retryIcon	渲染重新上传按钮，失败时展示，false不展示	string | boolean | VNode	reload	-	-
onDownload	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 返回值为 false 时不移除，支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不允许下载	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onDownload	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onPreview	点击文件链接或预览图标时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onRemove	点击移除文件时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-
onRetry	点击重新上传时的回调，返回值同上	(file: UploadFile) => boolean | Promise<boolean>	-	-	-

IxUploadSlots

名称	说明	参数类型	备注
default	上传组件选择器的展示形式	slotProp
fileList	文件列表自定义渲染	{fileList: UploadFile[], opr: FileOpr}	-
tip	上传提示区	-	-

// 上传文件
interface UploadFile extends File {
  uid: VKey // 唯一标识
  name: string // 文件名
  status: 'selected' | 'uploading' | 'error' | 'success'  | 'removed' // 当前状态
  thumbUrl?: string  // 缩略图链接
  downloadUrl?: string  // 下载链接
  percent?: number // 上传进度
  xhr?: XMLHttpRequest // xhr对象
  response?: Response // 服务端响应内容
}

// 自定义上传方法的参数
interface UploadRequestOption {
  onProgress?: (event: UploadProgressEvent) => void
  onEnd?: (res: Response, xhr: XMLHttpRequest) => void // todo
  data?: Record<string, unknown>
  filename?: string
  file: Exclude<UploadBeforeFileType, File | boolean> | UploadFile
  withCredentials?: boolean
  action: string
  headers?: UploadRequestHeader
  method: UploadRequestMethod
}

[typistZxd]

组件设计：

[typistZxd]

问题

1. 是否提供卡片图的上传组件？涉及联动（超出时隐藏上传按钮），目前时内置在IxUploadImageCardList中
2. 是否需要iframe上传器（为了支持ie9）？
3. 是否完全由用户自己控制fileList，自行控制展示的文件
4. 是否内置图片预览？
5. 内置的列表组件是否通过prop配置，而不是通过组件引用？
6. onChange是否可以不用，直接监听fileList变化即可？
   • 不可行，比较难知道是哪个文件的状态发生变化
7. 是否考虑大文件分片，断点续传
8. 有了onEnd是否还需要考虑onSuccess和onError
9. 是否支持串行上传和并行上传？

[danranVm]

• data => requestData or requestParams?
• drag => dragable
• fileList => files
• headers =>requestHeaders
• method => requestMethod
• withCredentials => 感觉不需要，就算需要也要换个名字
• transformFile 是干嘛的？ 感觉提供一个 customRequest 就够了？
• onStrar,progress, cancel end 跟 change 重叠了吧，提供一个chang 应该就够了？
• 几个子组件我还没看明白都是怎么用的，稍后讨论下。

问题：

1. 待定。
2. 你一定是在逗我，vue3 都不支持 ie 了
3. v-model 一定是支持受控的。
4. 可以
5. 可以
6. onChang 需要提供
7. 暂不考虑，如果有需求，就让用第三方的吧。
8. 都可以用 onChange 替代吧
9. 可以支持

另外，我建议你再去调研一下我们业务线自己已经封装过的上传组件看看，有没有一些基础场景被遗漏了。

[typistZxd]

review

1. data => requestData
2. drag => dragable
3. fileList => files
4. headers =>requestHeaders
5. method => requestMethod
6. withCredentials 保留
7. transformFile 用于转换文件格式（如加水印），和onSelect类似，onSelect类型改为 (file: File | File[]) => boolean | File | Promise<boolean | File>以支持
8. onChange => onFileStatusChange，用于以文件状态改变相关。onStart等 => onRequestChange，用于和请求改变相关，和ProgressEvent保持一致
9. 列表组件合并成一个，通过type来指定渲染不同
10. imageCard的selector组件内置，并忽略用户配置的selector
11. 响应时代号召，不支持iframe
12. files完全受控
13. 内置图片预览，可以由业务覆盖
14. onChange需要提供，为了知道是哪个文件的状态发生变化
15. 大文件分片，断点续传由业务通过onBeforeUpload等钩子实现
16. parallel: boolean是否并行上传请求，默认为true

[typistZxd]

补充需求

1. 输入框形式选择文件
   • 由业务封装，或者idux-pro中封装
2. 粘贴上传
   • 提供转换File转UploadFile的hooks或者cdk
   • 由业务封装，或者idux-pro中封装
3. 允许同时上传的请求数
   • 可以内置配置，默认为浏览器的并发请求限制